- 在样式表中可以使用media来局部定义响应式布局。
- 可以使用’and’来表示条件。
- 可以使用’,'来表示或。
- 可以使用’not’来表示非。
- 可以使用’only’来排除低端的浏览器,其运行过程就是先查看当前浏览器中是否含有媒体查询这个功能,没有就直接忽略这段样式。
@import url(small-x.css) only screen and (max-width: 768px); @import url(small.css) only screen and (min-width: 768px); @import url(medium.css) only screen and (min-width: 960px); @import url(big.css) only screen and (min-width: 1280px);
这里是通过在主css文件中引入其他的局部响应式文件来做的,这里需要注意的是代码的先后顺序,从上往下应该是最小宽度越小的排在越上面,否则就会导致样式的冲突和覆盖。
7.rem就是值当前html的字体大小,html的字体大小假设是16px,那么1rem就是16px,这就类似于变量的思想,这样即使屏幕大小不一样,也可以只改动html的字体大小就能改变所有元素的大小,如果用px的话一旦需要响应式时就要每个地方都要改,难以维护。
css3响应式布局之媒体查询和rem
最新推荐文章于 2022-10-25 21:59:18 发布