作者：流行时尚吾诺饰品手_317 | 来源：互联网 | 2023-08-19 16:26
注意&＃xff1a;
使用媒体查询需要设置meta的viewport属性&＃xff0c;在页头添加如下代码&＃xff1a;
实例
如果文档宽度小于 300 像素则修改背景颜色(background-color):
&＃64;media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
定义和使用
使用 &＃64;media 查询&＃xff0c;你可以针对不同的媒体类型定义不同的样式。
&＃64;media 可以针对不同的屏幕尺寸设置不同的样式&＃xff0c;特别是如果你需要设置设计响应式的页面&＃xff0c;&＃64;media 是非常有用的。
当你重置浏览器大小的过程中&＃xff0c;页面也会根据浏览器的宽度和高度重新渲染页面。
浏览器支持
更多实例
实例
使用 &＃64;media 查询来制作响应式设计&＃xff1a;
/*大于1024px */
&＃64;media all and (min-width:1024px)
{
}
/*640px到1023px之间 */
&＃64;media all and (min-width:640px) and (max-width:1023px)
{
}
/*320px到639px之间 */
&＃64;media all and (min-width:320px) and (max-width:639px)
{
}
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有