首页 前端知识 css3之响应式布局与性能优化,面试总结 详细解答

css3之响应式布局与性能优化,面试总结 详细解答

2024-05-29 10:05:14 前端知识 前端哥 408 178 我要收藏

对于媒体查询引入的三种方式

第一种通过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.性能优化,在页面的性能优化方面首先就是要明白浏览器的渲染原理,

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9904.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!