CSS媒体查询模块允许根据设备特性调整显示效果，通过设置不同的媒体类型和css表达式来实现响应式布局。在HTML中引入标签定义viewport，并使用@media属性针对不同屏幕尺寸设定样式。媒体类型包括all、print、screen、speech等，可以结合min-和max-修饰符定义尺寸范围。逻辑运算符如and、not和only用于组合和控制媒体查询条件。通过这种方式，可以在不同设备上提供优化的视觉体验。
CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组成，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断结果为true的时候，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为false，样式表同样会被下载，但是不会应用。用媒体查询来实现响应式布局
1.引入meta标签
<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum=scale=1.0,user-scalable=no'>
2.使用@media属性设置不同尺寸下的样式<link rel="stylesheet" media="" href="">
media属性
- @mediascreenand(max-width:768px)超小屏
- @mediascreenand(min-width:768px)and(max-width:992px)小屏
- @mediascreenand(min-width:992px)and(max-width:1200px)中屏
- @mediascreenand(min-width:1200px)大屏
媒体类型
- all适用所有的设备
- print适用于打印用纸或打印预览视图
- screen主要适用于电脑/手机/平板等智能设备屏幕
- speech适用于语音合成器
- tv电视设备
使用@media属性，对于不同尺寸的设备设置不同的样式即可
最低0.47元/天 解锁文章
4477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
