移动端和网页端行间距css 网页和移动端界面设计

移动端H5页面的设计稿尺寸(上)

1、经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。

2、H5的尺寸一般设计为640x1136px 既满足了显示需求，又能降低用户加载图片需要的带宽。可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。

3、一般安全区内框的尺寸是375X603PX，但在制作上又是另外一回事了，作铺满内框的图要按照这个尺寸的2倍大小去做。出血区也就是外框尺寸是422X748PX，作铺满外框的图要按照这个尺寸的2倍大小去做。

4、*1136pxH5一般的设计尺寸采用740*1136px即可，不过实际尺寸采用720x1280/750x1334px尺寸也可以实现，这样用于填充不同手机屏幕边缘区域，确保不会露白。

相关问答

Q1: 移动端界面设计常识规范

1、安卓界面规范众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。

2、在设计的时候，优先从1024×1024px开始设计，尽量使用矢量图层或矢量软件进行绘制，要考虑印刷设计要求。

3、：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。

Q2: 网页左右边距怎么调CSS的

通过使用下面四个单独的属性，分别设置左、右内边距：padding-right padding-left 例：这就是调整表格内容与边的边距。

左右边距是子元素距离父元素左边或者右边的距离。可以用margin-left和margin-right来设置左右边距。

块元素的之间的间距使用margin属性设置。CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

在CSS中，可以使用margin属性及其相关属性来设置外边距。margin(外边距)属性定义元素周围的空间，允许使用负值。margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

Q3: web前端入门到实战:css实现单行、多行文本超出显示省略号

html参考代码，加注释的部分就是实现多行文本省略的必要属性。

text-overflow：ellipsis属性来实现单行文本的溢出显示省略号(…)在WebKit浏览器或移动端，用-webkit-line-clamp用来限制在一个块元素显示的文本的行数 两者结合就能得到你要的效果。

ellipsis 属性来，当然还需要加宽度width属来兼容部分浏览。

Q4: 移动端Web页面适配方案(整理版)

移动端web页面的开发，由于手机 屏幕尺寸 、 分辨率 不同，或者需要考虑 横竖屏 问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

initial-scale 设置的缩放大小会改变理想viewport的大小，不会改变可视viewport的大小，也不会改变布局viewport的大小，这是某些适配方案依赖的基本原理，也是解决 1px问题 的关键。后面分析适配方案时，动态viewport适配方案就依赖这个知识点。

动态 rem方案 一切单位以屏幕宽度为标准，就能完美还原设计稿。

之前默认使用的系统内置浏览器对象，去年应该已经在Android切换为第三方浏览器内核了。兼容性基本不用考虑，不需要考虑media query了等等适配工作。基于参考要求，在任意一个终端上开发，在所有终端上都会有统一的展现。

网站升级为HTTPS，目前主流的搜索引擎都支持HTTPS并且在权重，排名上都会向前。网页前段的自适应，通过CSS以及JS来根据浏览器自动调整。服务器自适应输出页面，如果是移动端则使用HTML5模板，如果是PC端则使用web模板。

到这里，web适配移动设备的方案就出来，让viewport=手机的宽度就好了。

Q5: css样式布局及rem用法梳理

1、弹性盒模型布局flex 这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。rem布局 rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配。

2、首先css3规定1rem = html根节点的font-size，rem也就是root em简写。 为了方便计算通常设置根节点font-size = 100px 那么 1rem = 100px 核心思想： 百分比布局可实现响应式布局，而rem相当于百分比布局。

3、body选择器中声明Font-size=65%； 将你的原来的px数值除以10，然后换上em作为单位； 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

4、CSS3新增的一个相对单位rem（root em，根em）。rem是相对于根节点（或者是html节点）。

关于移动端和网页端行间距css和网页和移动端界面设计的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。