CSS3知识回顾(12)
rem布局
em
是父元素的大小,字符
- 相对与
父元素
的字体大小
rem
的基准是相对于html
的字体大小
- 优势:可以通过修改html里面的文字大小来改变页面中的元素的大小来整体控制页面
媒体查询
- 可以针对不同的屏幕的尺寸设置不同的样式
1 | @media mediatype and|not|only(media feature){} |
- 媒体类型
- all
- scree(用于电脑屏幕,平板,手机)
- 关键字
- and
- not
- only
- 媒体特性
- max-width/min
从小到大
写代码更简洁,使用层叠性
- 媒体查询+rem实现元素的动态变化
- 媒体查询引入资源link
less
- css的扩展语言,Sass,less,Stylus
- less变量
- @color(变量名区分大小写)
- less编译 easy less
- less嵌套子元素的样式直接写道父元素里面就好了
- 伪元素要加
&
- 使用less运算方便计算(有空格隔开)
- 运算过程中两个都有单位以第一个为准
- import在样式文件中相导入
rem适配方案
- 实现页面元素的自适应,实现等比缩放的适配
- rem适配方案
flexible.js
- flexible.js在宽度超出750px后使用媒体查询,强制修改宽度为75px
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论