rem布局

  1. em是父元素的大小,字符
  • 相对与父元素的字体大小
  1. rem的基准是相对于html的字体大小
  • 优势:可以通过修改html里面的文字大小来改变页面中的元素的大小来整体控制页面

媒体查询

  1. 可以针对不同的屏幕的尺寸设置不同的样式
1
@media mediatype and|not|only(media feature){}
  1. 媒体类型
  • all
  • print
  • scree(用于电脑屏幕,平板,手机)
  1. 关键字
  • and
  • not
  • only
  1. 媒体特性
  • max-width/min
  • 从小到大写代码更简洁,使用层叠性
  1. 媒体查询+rem实现元素的动态变化
  2. 媒体查询引入资源link

less

  1. css的扩展语言,Sass,less,Stylus
  2. less变量
  • @color(变量名区分大小写)
  1. less编译 easy less
  2. less嵌套子元素的样式直接写道父元素里面就好了
  • 伪元素要加&
  1. 使用less运算方便计算(有空格隔开)
  • 运算过程中两个都有单位以第一个为准
  1. import在样式文件中相导入

rem适配方案

  1. 实现页面元素的自适应,实现等比缩放的适配
  2. rem适配方案flexible.js
  3. flexible.js在宽度超出750px后使用媒体查询,强制修改宽度为75px