前端学习记录20-移动端布局-(rem布局、媒体查询、less使用、颜色渐变实现)

rem布局

root em 是一个相对单位，类似于em，em相对是父元素的字体大小
rem的基准是相对于html元素的字体大小

比如，根元素(html)设置font-size:12px;非根元素设置width:2rem;则转成px表示就是24px;

优点:可以通过修改html里的文字大小来改变页面元素的大小，实现整体控制

rem适配方案

让一些不能等比自适应的元素，达到设备尺寸发生改变的时候，等比例适配当前设备

使用媒体查询根据不同的设备按比例设置html字体大小
然后页面元素使用rem做尺寸单位，当html字体大小变化
元素尺寸也发生变化，从而达到等比缩放的适配

rem实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小
css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算rem单位的值

方案1：rem+less+媒体查询
方案2：flexible.js+rem

注意：由于flexible.js现在已经不再维护，并且浏览器对于viewport的支持已经非常优秀，方案2我个人觉得已经不怎么用了

媒体查询

媒体查询 Media Qurey CSS3中新的语法

使用@meida查询，可针对不同的媒体类型定义不同的样式
@media可针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机、平板等设备都能用到媒体查询

语法规范

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


and 可以将多个媒体特性连接到一起
not 排除某个媒体类型  可以省略
only 指定某个媒体类型 可以省略

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

@media mediatype and|not|only (media feature){
   
      CSS-Code;
}

媒体查询(引入资源)

当样式比较多的时候，可针对不同的媒体使用不同的stylesheets(样式表)
原理，直接在link中判断尺寸，然后引用不同的css文件

屏幕大于640px以上 div一行显示俩
屏幕小于640 div一行显示一个
语法规范

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

    <link rel="stylesheet" media="screen and