媒体查询

本文介绍了如何使用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;
            }
        }

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

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

     <metaname=”viewport” content=”initial-scale=2.0, width=device-width” /> 

  name=”viewport”  说明此meta标签定义视口的属性

  initial-scale=2.0   意思是将页面放大两倍

  width=device-width   告诉浏览器页面的宽度等于设备宽度

  允许用户将页面最大放大至设备宽度3倍,最小压缩至设备宽度的一半

  <metaname=”viewport” content=”width=device-width, maximum-scale=3,minimum-scale=0.5” />

  禁止用户缩放,可以在混合APP时,为了使html页面更逼真,使页面无法缩放

  <metaname=”viewport” content=”initial-scale=1.0, user-scalable=no” />   //user-scalable=no是禁止缩放

  *浏览器宽和设备的宽是不一样的,如果让页面的宽等于设备的宽,并且使用同样的分辨率值来进行媒体查询,那么结果肯定是在小设备的情况下会出现滚动条,所以手机设备的媒体查询时的分辨率宽与实际的分辨率不同,一般媒体查询检测移动设备为320px


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值