rem适配方案与移动端web开发之响应式布局

rem适配方案

1. 让一些不能等比自适应的元素， 达到当设备尺寸发生改变的时候，等比例适配当前设备。
2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当HTML字体大小变化
元素尺寸也会发生变化，从而达到等比缩放的适配。

1. rem实际开发适配方案

 1. 按照设计与设备宽度的比例，动态计算并设置html根标签的font-size 大小； （媒体查询）
 2. CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；

2. rem 适配方案技术使用（市场主流）

技术方案1	技术方案2（推荐）
less	flexible.js
媒体查询	rem
rem

总结：

1. 两种方案现在都存在。
2. 方案2 更简单， 现阶段大家无需了解里面的js代码。

3. rem实际开发适配方案1

rem + 媒体查询 + less技术

1. 设计稿常见尺寸宽度

设备	常见宽度
iPhone 4.5	640px
iPhone 678	750px
Android	常见 320px,360px,375px,384px,400px,414px,500px,720px, 大部分4.7~5寸的安卓设备为720px

一般情况下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果
现在基本以750为准。

2. 动态设置html标签font-size大小

	1.假设设计稿是750px。
    2.假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）。
    3.每一份作为html字体大小， 这里就是50px。
    4.那么在320px设备的时候，字体大小为320/15 就是 21.33px。
    5. 用我们页面元素的大小除以不同的html 字体大小会发现他们比例还是相同的 。
    6.比如我们以750位标准设计稿。
    7. 一个100*100像素的页面元素在750屏幕下，就是100/50 转换为rem 是 2rem*2rem比例是 1比1。
    8.320屏幕下，html字体大小为21.33  则2rem = 42.66px  此时宽和高都是 42.66 但是 宽和高的比例还是1比1。
    9.但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果  。

3. 元素大小取值方法

 1. 最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
 2. 屏幕宽度/划分的份数就是HTML font-size 的大小
 3. 或者： 页面元素的rem值 = 页面元素值(px) / html font-size 字体大小 

rem适配方案命令演示：

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    "X-UA-Compatible" content="ie=edge">
    
    


    

移动端web开发之响应式布局

1.响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备划分	尺寸区间
超小屏幕（手机）	< 768px
小屏设备 （平板）	> = 768px ~ < 992px
中等屏幕（桌面显示器）	> = 992px ~ < 1200px
宽屏设备（大桌显示器）	> = 1200px

命令演示：

    
    
    
    
    


      
    
"container">

网页显示：

2. 响应式布局容器

响应时需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和
大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分

超小屏幕（手机，小于768px）：设置宽度为100%
小屏幕（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px

案例：需求分析

1. 当我们屏幕大于等于768像素，我们给布局容器container宽度为750px。
2. container里面包含8个小li盒子的宽度定为 93.75px （750 / 8）， 高度为30px，浮动一行显示。
3. 当我们屏幕缩放，宽度小于768像素的时候，container盒子宽度修改为100%宽度。
4. 此时里面的8个小li，宽度修改为33.33%， 这样一行就只能显示3个小li，剩余下行显示。

案例导航栏命令演示：

    
    
    
    
    


    
"container">
        

            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏
            
导航栏