移动端布局的一些小知识

• 关于PC端与移动端的区别

1. PC端主要考虑浏览器的兼容性
2. 移动端主要考虑屏幕的分辨率

• 关于像素的一些概念

1. 设备独立像素：

屏幕的大小，屏幕的尺寸（别名叫点，是个单位，即用尺寸量手机屏幕的长宽）

获取：window.screen.width/window.screen.height

注意：

1. 横屏切换的时候，真机里的这个值是不会变，但在模拟器里是会切换的
2. 在一个点里，可以放下多个像素
3. 这个值可以被改变

1. 设备像素（物理像素）

屏幕分辨率（实际放的像素值），买手机的时候厂家告诉你的分辨率

这个值是虚拟的，无法获取

1. 像素比（DPR，这个值无法修改）

缩放的比例=设备像素/设备独立像素

获取：window.devicePixelRatio

1. 补充网址

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

• 关于viewport

1. 视口（可视区窗口），移动端如果没有设置会认为你是用电脑打开此网页的
2. window.innerWidth/window.innerHeight可以获得移动设备屏幕的独立像素，此方法用于PC端的话，它会随着页面可视区的改变而改变
3. 设置：

宽度：<meta name=”viewport” content=”width = device-width” />

高度：content=”width = device-width,height = device-height”,高度一般不用设置

禁止用户缩放：content=”user-scalable=no”

最:<meta name=”viewport” content=”width = device-width, user-scalable=no” />

1. 关于缩放

content=”initial-scale=1,minimum-scale=1,maximum-scale=1”

initial-scale：初始比例（要与最小缩放比例保持一致）

minimum-scale：最小能够缩放的比例

maximum-scale：最大能够缩放的比例

1. 如果缩放的话，就把width和user-scalable去掉
2. 用了缩放后，并不是真的缩放了，而是改变了屏幕的尺寸（设备的独立像素）
3. 以下代码防止了第三方放大工具，破坏了缩放禁止（此代码用以备用）

<meta name=”viewport” content=”width = device-width, user-scalable=no, ”initial-scale=1,minimum-scale=1,maximum-scale=1” />

1. 关于像素比

比如手机的设备独立像素是375，像素比是2。你设置width为375px，正好能占满整个屏幕，但是375个点，每个点应该填充2个像素，实际应该填放750个像素。这时候2个像素中的另一个就会用近似色填充，照成图片的模糊，所以375独立像素的屏幕，应该配的图是750px的像素。

1. 关于设计图

设计图要根据设备像素（屏幕分辨率）去定大小，至少宽度要在750以上（一般会以750的宽为基准）

百度统计网站：https://mtj.baidu.com/data/mobile/device/

这个网址可以查看，主流手机的分辨率，750是目前主流分辨率

• 关于适配

1. 适配的方法

1. 百分比适配

1. 比例缩放适配

把所有设备的独立像素设置成一样的。通过initial-scale,minimum-scale,maximum-scale配合实现。

1. viewport适配（还原原来的像素，即用1/像素比=比例）

1. rem适配

em:根据元素中字体的大小，进行适配

rem:根据html字体大小的值，进行适配

设置html字体大小代码：

<script>

       (function(){

              var html = document.documentElement; //获取html元素

              var width = html.getBoundingClientRect().width; //获取屏幕的宽度，用window.screen.width也可以。

              html.style.fontSize = width/16 + ‘px’;  //动态设置html的字体大小，16只是一个参考值，即把屏幕分成16份，其他值也是可以的。

})();

</script>

1. 弹性布局适配

• 关于less编程的一些知识

1. less可以编译成css文件
2. 编程示例

• 关于移动端的一些问题                                                       

1. body下的overflow问题

body加了overflow:hidden，在ios真机下不起作用，android没问题。

1. 固定定位的问题（oppo A59下QQ浏览器测试没有发现问题）

1. 固定定位在移动端的兼容性很不好，有些以前老版本的安卓手机不支持，ios4以前的版本也不支持
2. qq浏览器下有时候网上滑动的话，就会隐藏掉header
3. 当打开键盘的时候，固定定位就失去作用了。

1. 移动端的样式重置

1. 每台设备里的默认字体是不一样的（移动端设备里大部分没有宋体与微软雅黑字体） font-family:helvetica;  这个字体几乎手机都有
2. 链接点击的时候有默认有一个背景（oppo A59下QQ浏览器，没看出有背景）

-webkit-tap-highlight-color:rgba(0,0,0,0);

webkit：浏览器的引擎。例如：苹果Safari

1. 按钮在ios下都是圆角

-webkit-appearance:none;   //消除输入框和按钮的默认外观

border-radius: 0;

1. 切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小，如果不希望用户改变字体大小，可以添加以下语句：

-webkit-text-size-adjust:100%;

补充：

 -moz-：代表FireFox浏览器私有属性

 -ms-：代表IE浏览器私有属性

 -webkit-：代表safari、chrome浏览器私有属性

 -o-：代表opera浏览器私有属性

1. 长按文字ios下会选中文字，安卓无效，解决方法

-webkit-user-select:none;

• 设计流程

1. 根据设计图的像素，寻找等宽的手机屏幕，如W:1080，可以找iphone6plus
2. 设置视口
3. 动态设置html的字体大小，为转换rem准备。

 

 

• 布局的一些技巧

1. 像这种上下有间距的情况，不用给出整个背景的高度再进行垂直居中。可以设置文字所占的高度，再使用padding或者margin撑高背景，再把行高（line-height）设为文字所占的高度，同样可以达到垂直居中。
2. 移动端在做链接的时候，尽可能的把点击范围做大。
3. 当行内元素的文档流被破坏的时候可以设置它们的宽高了，比如浮动，positon等
4. background:url(图片路径) no-repeat right center;

no-repeat后面分别是x轴的布局（repeat-x）和y轴的布局（repeat-y）

background-size:cover;

切图的时候，如果图片的分辨率大了，图片引入后只会显示局部。如果父级容器的大小适合引入图片的大小，可以用cover来设置图片的大小。如果图片的大小和父级容器的大小不一致，可以查看切图图片的分辨率，把cover换成它宽高的分辨率即可。

1. box-sizing: border-box;

消除padding和margin设置后容器被撑大的影响。

1. 如果元素占据整个屏幕的宽度，最好给

width:100%;

text-align:center;

1. nav标签定义导航链接的部分，header标签，定义文档的页眉。不过这些h5的标签有些浏览器不支持。
2. 如果想让图片适配每个手机的分辨率，可以制作多种分辨率的图片，再用媒体查询去匹配相应的图片。小图标，最好用图标库，才不会失真。
3. 行内元素中，最行不用再嵌套块级元素了。如：a标签中，就不要用div标签了，可以用span标签。