媒体查询

最新推荐文章于 2025-04-28 20:06:56 发布

q_A_p

最新推荐文章于 2025-04-28 20:06:56 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/q_A_p/article/details/53560687

html 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用CSS媒体查询来实现响应式设计，并通过不同的屏幕尺寸改变网页样式。此外，还介绍了如何利用HTML中的<meta>标签来控制移动浏览器的视口缩放，确保网页在不同设备上正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

媒体查询是界面为了适应不同屏幕大小而存在的

基本语法是：

@media mediatype and（在）| not（不再）|only （仅在）(media feature （设备尺寸）) {

CSS-Code;

}

body{
            background-color:grey;	//正常情况是灰色
        }
        @media screen and (max-width:960px){     //分辨率最大不超过960的情况下，背景色为红色
            body{ background-color:red;}
        }
        @media screen and (max-width: 768px){
            body{
                background-color:orange;
            }
        }
        @media screen and ( max-width: 550px){
            body{
                background-color:yellow;
            }
        }

阻止移动浏览器自动调整页面大小

ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的<head>标签中插入一个<meta>标签，meta标签中可以设置具体的宽度或缩放比。下面为示例