移动端布局的5种方式

刚换公司，设计稿还没出，也没有安排新任务，所以抽空整理一下移动端布局方式。

移动端布局方式整理：

1.固定meta视图

<meta name="viewport" content="width=750px,user-scalable=no">

　　这种写法中，利用meta标签，将视图宽度定位了750px，固定值，也就是ios6的标准，然后css也是基于750px的设计稿进行布局

优点：前端开发十分快速，都是死值

缺点：匹配不完全，手机像素高于这个的，显示这个效果，不理想状态；低于这个状态的，不兼容这个状态；

　　　固定宽在做项目的时候由于每个手机屏幕的高度不同需要有一个最小的内容区域

2.rem布局

rem是一种基于页面根元素的布局方式

当手机屏幕大小改变了，只要改变对应的页面根元素，就可以实现页面的缩小放大。

按照750px的设计稿，进行布局的时候 可以在head中添加下图的一段j，监听屏幕改变，从而动态改变页面根元素的fonsize大小，对页面进行缩放改变

换句话说 设置根元素 fontsize=16px 那么 1rem=16px，所以根据屏幕大小 而动态改变 fontsize的值，从而做到 移动端rem适配效果。

<script type="text/javascript">
      (function (win,doc) {
        function setSize() {
          doc.documentElement.style.fontSize=20*document.documentElement.clientWidth/750+'px';
        }
        setSize();
        win.addEventListener('resize',setSize,false)
      })(window,document)
  </script>

 

优点：引入js后，通过动态修改根元素fontsize,根据手机屏幕 自动缩放

缺点：head中 就要引入js，会有一点加载影响

 

3.meta媒体查询 动态设置，几个手机的比例，进行对应匹配；

meta标签，通过媒体查询 按照不同手机的像素宽高不同，进行条件匹配

 

优点：根据不同手机定制不同css，达到完美展示

缺点：需要写匹配很多手机，写很多套css，对前端工作量比较大

 

引用一下相关知识点 ：网页布局中 px,rem,em,pt  https://www.cnblogs.com/GoTing/p/10819172.html

 4.改变缩放比例，进行布局，类似于第2种方式，2是根据设备宽高对根元素进行font-size的动态改变，4这种方式则是通过改变meta种缩放比例，来进行动态改变页面的

这里有一个点需要说明 

像素比 window.devicePixelRatio = 设备像素/css像素

（补充一下 分辨率 和像素的 内容： 某博客内容

• 高分辨率：eg每一毫米5像素点，像素点越多，色块越多，页面越清晰
• 低分辨率：eg每一毫米3像素点，像素点越少，色块越少，页面越模糊
• 肉眼看得请不清晰，跟屏幕实际尺寸的大小没关系，而跟单位长度的像素点有关，低分辨率的放在大屏上 也只是一个 放大的不清楚的画面而已

• 对于前端开发来说，设计图是1920或者是1366并不代表是宽度

• 所以当你的网页完全按照设计图使用px来实现的话，有可能出现两种情况：
  - html宽度用了设计图1366px，但无奈到了1024的电脑或者手机的时候，就会出现了横向滚动条
  - html宽度用了设计图1366px，到了1920的电脑上，就会出现大量的留白

）

5.百分比布局

 将整个页面 按照百分比 进行布局 对于宽度 比较好把握 但是 高度还是需要具体的值 

 

转载于:https://www.cnblogs.com/GoTing/p/10815223.html