对于媒体查询引入的三种方式
第一种通过link标签的形式去引入,media中前面的screen是指的媒体类型 后面的max-width是指的媒体特性:width 和 device-width(设备宽度)
第二种引入方式
第三种引入方式
@media screen and (max-width : 800px) and (min-width: 600px){
}
常见使用的几种媒体类型 all 所有设备 screen 彩色电脑屏幕 print 文档打印或者打印预览模式
逻辑运算符 在媒体查询中没有或者连接符,这是采用“,”来表示即可
下面给出一个简单的例子,首先我们在我们的html的结构中引入一个div标签,然后再在style中引入下面的代码实例:
最后将其在页面上运行就能看到对应的效果,在最初学习css3与h5之前写过一个关于响应式布局的的页面,由于在最初学习的时候对于页面布局等不是很熟,所有存在一定的缺陷,如果需要看这个响应式布局请去git上下载。具体地址如下:https://github.com/whocareit/web-study/tree/79f606bda29864252cc27ba4244b3784cb98f536
2.性能优化,在页面的性能优化方面首先就是要明白浏览器的渲染原理,