移动端页面开发的四种方式笔记(二)

rem+媒体查询

rem是一个相对单位，类似于em，em是父元素字体大小，而rem是相对于html元素的字体大小。比如HTML的字体设置为12px，那么2rem就代表了24px。

媒体查询
它是CSS3的新语法
使用@media查询，可以针对不同的媒体类型设置不同的样式，当重置页面的大小时，页面会根据浏览器的宽度和高度重新渲染页面。

@media mediatype and|not|only (media feature) {
    css-code;
}

@media开头
mediatype媒体类型
关键字and not only
(media feature)媒体特性 必须有小括号包含

mediatype媒体类型
all 用于所有设备
print 用于打印机和打印预览
scree 用于电脑屏幕，平板电脑，智能手机等

关键字
and 可以把多个媒体的特性连接在一起
not 排除某个多媒体类型 可以省略
only 指定某个特定的媒体类型 可以省略

media feature媒体特性
width 定义页面设备中可见区域的宽度
min-width 定义输出页面的最小可见区域宽度
max-width定义输出设备中页面最大区域宽度

媒体查询+rem可以实现元素动态大小变化
rem是跟着HTML动的，有了rem元素可以设置不同大小尺寸
媒体查询可以根据不同宽度来修改样式
两者结合就可以在不同设备的宽度下，动态改变页面的变化

引入资源
当样式比较多的时候可以针对不同的媒体使用不同的stylesheets，它的原理就是直接在link中判断设备的尺寸，然后引入不同的css文件。

规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href=mystylesheet.css"">

css的弊端
需要书写大量没有逻辑的代码，冗余度很高
不方便维护，不利于重复利用
没有很好的计算能力
所以需要采用新技术less

Less
less变量
变量是指没有固定的值，可以改变。所以css中的一些颜色和数值经常使用下边的方式来替换
@变量名：值；

变量命名规范
必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

Less嵌套

这是css的写法

#header .logo {
	width：300px；
}

下边是less的写法

#header {
 	.logo{
		width：300px；
	}
}

注意：
如果有伪类、交集选择器、伪元素选择器 内层的选择器前面需要加&

a{
    &:hover{
        
    }
}

a{
    &::hover{
        
    }
}

less运算
任何数字、颜色或者变量都可以参与运算

@width: 10px + 5;
div{
    border: @width solid red;
    width: (@width + 5) * 2;
}

rem适配技术使用
方案1：
less+媒体查询+rem
方案2（更简单）：
flexible.js+rem

less+媒体查询+rem
1、设计稿常见尺寸宽度
iPhone4.5 640px
iPhone678 750px
Android 常见320px、360px、375px、384px、400px、414px、500px、720px
2、动态设置html标签和font-size大小
假设设计稿是750px
假设把整个屏幕分成15等份
每一份作为html字体大小，就是50px
在设备是320px时，字体就是320/15就是21.33px
用页面元素除以不同的html字体大小就会发现比例相同
假如是750的设计稿
一个100100的像素页面在750屏幕下100/50转换成rem是2rem2rem比例是1:1
320屏幕下，html字体大小为21.33 则2rem=42.66 此时宽高比还是1:1，这样就实现了盒子等比缩放

3、元素大小取值方法
页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
屏幕宽度/划分的份数就是html中font-size的字体大小

4、设置公共common,less文件
我们关心的尺寸有320px、360px、375px、384px、400px、414px、500px、720px等等
划分的份数为15份

html{font-size: 50px;}
@no:15;
@media screen and (min-width: 320px) {
    html{font-size: 320px / @no;}
}
@media screen and (min-width: 360px) {
    html{font-size: 360px / @no;}
}
@media screen and (min-width: 375px) {
    html{font-size: 375px / @no;}
}
@media screen and (min-width: 384px) {
    html{font-size: 384px / @no;}
}
@media screen and (min-width: 400px) {
    html{font-size: 400px / @no;}
}
@media screen and (min-width: 414px) {
    html{font-size: 414px / @no;}
}
@media screen and (min-width: 424px) {
    html{font-size: 424px / @no;}
}
@media screen and (min-width: 480px) {
    html{font-size: 480px / @no;}
}
@media screen and (min-width: 540px) {
    html{font-size: 540px / @no;}
}
@media screen and (min-width: 720px) {
    html{font-size: 720px / @no;}
}
@media screen and (min-width: 750px) {
    html{font-size: 750px / @no;}
}

然后用@import "common"引入另一个less文件

@import "common";

flexible.js+rem
flexible.js是一个简洁高效的移动端适配库
它把当前设备划分成10份，但比例还是一致的
我们只需要确定好当前设备的html文字大小
比如当前设计稿是750px，那么只需要把html文字大小设置为750px /10=75px就可以
那么rem值就是页面元素px值/75

当设备的宽度超过了750px，页面的宽度就设定为750px

@media screen and (min-width:750px){
    html{
        font-size: 75px!important;
    }
}