css笔记

rem+媒体查询布局
（1）、rem单位：相对单位，相对于html根元素的字体⼤⼩，通过更改html⽂字的⼤⼩，改变⻚⾯的
⼤⼩
（2）、媒体查询（meidia Query）：
使⽤@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺⼨设置不同的样式
当重制浏览器⼤⼩的过程中，⻚⾯也会根据浏览器的宽度和⾼度重新渲染⻚⾯
语法：
@media 媒体类型 关键字 （媒体特性）{css}
媒体类型（可以同时⽤多个媒体类型，⽤逗号隔开,这样他们之间就是或的关系）
all 所有设备
print 打印设备或打印预览
screen 带屏幕的设备（电脑，⼿机）**
speech 屏幕阅读器
关键字 and not only 来连接
将媒体类型或多个媒体特性连接到⼀起作为媒体查询的条件
and：可以将多个媒体特性连接到⼀起，相当于且的意思
not：排除某个媒体类型，相当于“⾮”的意思，可以省略
only：指定某个特定的媒体类型，可以省略
媒体特性(必须要有⼩括号)
width ⻚⾯可⻅宽度
max-width 视⼝的最⼤宽度（视⼝⼩于指定宽度时就⽣效，⼩于等于xxxpx）
min-width 视⼝的最⼩宽度（视⼝⼤于指定宽度时就⽣效）
max-height 最⼤⾼度
min-height 最⼩⾼度
orientation:landscape 横屏
orientation:portrait 竖屏

混合布局(主流)
rem适配—移动端开发的步骤
第⼀步：拿到多⼤的设计稿，将root font size 改成 ：设计稿的⼤⼩/10
第⼆步：引⼊flexable.js ，动态的去修改html的字体⼤⼩
第三步：正常根据设计稿的⼤⼩去开发，将所有的px值换算为rem的值

vw、vh（未来的趋势）
vw也是百分⽐，只不过这个百分⽐只参考设备视⼝
vw（Viewport‘s width）：1vw等于视⼝宽度的1%
vh（Viewport’s height）：1vh等于视⼝⾼度的1%
vmin：vw和vh中的较⼩值
vmax：选取vw和vh中的最⼤值