移动端布局的简单介绍

移动端布局

运行在移动设备的浏览器的web页面（H5页面、微网页、WAP页）

移动端浏览器

基于webkit内核

viewport设置

viewport即视口相当于PC端的浏览器窗口，可以设备尺寸大，也可以比设备尺寸小，允许开发者自定义

<meta name="viewport"  content="具体设置">

• 默认常规大小 980-1024px
• 保证 PC 页面在移动浏览器上面的可视性

移动端开发中视口

视觉视口

用户通过屏幕真实看到的网页的区域。，即屏幕宽度（设备宽度）

布局视口

布局视口是网页布局的基准窗口

在移动端，布局视口被赋予一个默认值，大部分为980px

理想视口

基于理想视口而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，
网站的所有内容都可以正常的呈现给用户

 <meta name="viewport" content="width=device-width, initial-scale=1.0，maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

• width=device-width 视口宽度 = 设备宽度
• initial-scale=1.0 初始缩放比例为1
• 其他
  • 属性 说明
    initial-scale初始缩放比，大于0的数字
    maximum-scale 最大缩放比（范围0.1 - 10）
    minimum-scale 最小缩放比（范围0.1 - 10）
    user-scalable 用户是否可以缩放，yes或no（1或0）

移动端适配

在不同规格的移动设备上，页面能够针对性的实现【合理】或者【尽可能统一】的展示效果

宽度自适应

垂直方向用定值，水平方向用百分比、弹性布局及浮动、定位等布局技巧的综合运用创建可扩展的流式布局，让页面有能力随着屏幕宽度变化，页面也会跟着变化。

• 一定程度上满足自适应的需求
• 不能在每种尺寸下都获得良好的视觉效果比如在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样。
• 更适用于对横向拉伸的设计元素,对设计稿有一定要求，存在局限性

rem方法+媒体查询

实现步骤

1）设置页面的viewport
2）确立好基准值，常规布局，使用rem单位取代px
3）换算不同设备尺寸下1rem的值，即改变不同尺寸下html 的font-size

• 基本能够满足常规适配需求，缺点是由于设备尺寸繁多需要设置密集的断点
• 由于区配的区间性对不同设备的适配不是非常精准；
• 不在查询设置范围之内，会导致无法适配。

rem+js原理

通过js实现不同设备尺寸下的换算

/获取html宽度（设备宽度）
  var deviceWidth = document.documentElement.clientWidth;       
// 750可以根据实际设计稿的宽度进行修改
        if(deviceWidth>750){
             deviceWidth = 750;
        }
 var fs = (deviceWidth*100)/750;
 document.documentElement.style.fontSize = fs + 'px';