移动端基础Rem

移动端

1.移动端开发选择

1.1 移动端主流方案

1、单独指针移动端页面(主流)            |  2、响应式页面兼容移动端(其次)

     京东商城手机版                             |         三星手机官网

     淘宝触摸板                                    |         

     苏宁易购手机版                         

   1.2 单独移动端页面

单独移动端页面(主流)

通常情况下，网站域名前加m(mobile)可以打开移动端，通过用户判断设备，如果移动设备打开，则跳到移动端页面。

 1.3 响应式兼容pc移动端

 三星电子官网：www.samsung.com/cn/ 通过判断屏幕宽度来改变样式，以适应不同终端。

 缺点：制作麻烦，需要花很大精力去调兼容性问题。

 总结： 现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案。 现在市场主流的选择还是单独制作移动端页面。

2.移动端技术解决方案

2.1 移动端浏览器

移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用h5标签和css3样式。同时我们浏览器的私有前缀我们只需要考虑添加webkit即可。

2.2 移动端浏览器

Css3盒子模型box-sizing

1、传统模式宽度计算：盒子的宽度=css中设置的width+border+padding。

2、Css3盒子模型：盒子的宽度=css中设置的宽度width里面包含了border和padding也就是说，我们的css3中的盒子模型，padding和border不会撑大盒子模型

属性:

css3盒子模型

box-sizing:border-box;

传统盒子模型

box-sizing:content-box;

传统css3盒子模型？

1、移动端可以全部css3盒子模型。 Pc端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择css3盒子模型

2.3 移动端常见布局

移动端布局和我们以前学习的pc端区别：

1.单独制作移动端页面(主流)            | 2.响应式页面兼容移动端(其次)

   流式布局(百分比布局)                      |  媒体查询

   Fiex弹性布局                                    |  bootstarp

   Sass+rem+媒体查询布局            |

   混合布局                    |

3.流式布局(百分比布局)

3.1 流式布局

目标：能够使用百分比布局开发网页

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制。内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

效果： 宽度自适应，高度固定。

4.rem

4.1 rem

目标：能够使用rem单位设置网页元素的尺寸

 4.2 rem

目标：能够使用rem单位设置网页元素的尺寸。

网页效果

        屏幕宽度不同，网页元素尺寸不同（等比缩放）

px单位,em单位或百分比布局可以实现吗？

        px单位是绝对单位

        em 是相对长度单位，EM是相对于父元素来设计字体大小的。

        百分比布局特点宽度自适应，高度固定

 适配方案

        rem

        vw / vh

4.3 rem

目标：能够使用rem单位设置网页元素的尺寸。

rem单位

        相对单位

        类似于em，em是父元素字体大小。

        rem单位是相对于HTML标签的字号计算结果

        1rem = 1HTML字号大小

        比如根元素(html)设置font-size=12px；非根元素width：2rem，则换算成px表示24px。

4.4封装rem换算 

function size(){
         var doc=document.documentElement;
         var w=doc.clientWidth;
         if(w>750){
            w=750;
         }
         doc.style.fontSize=w/375*100+'px';
      }
      size();
      window.onresize=function(){
         size();
      }