媒体查询及使用

1.什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

        媒体查询可以根据当前显示设备的特性(如: 视口宽度, 屏幕比例,设备显示方向)为其添加css样式, 使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性(视口宽度等),更方便的针对视口设置合适的样式。总之:媒体查询可以让网页适应多个终端。

2.查询类型

将不同的终端设备划分为不同的类型,称为媒体类型

all用于所有设备
print用于打印机和打印预览
scree用于电脑屏幕,拼版电脑,手机等

3.关键字

关键字将媒体类型或多个特性连接到一起做为媒体查询的条件

and可以将多个媒体特性连接到一起,相当"且"于的意思
not排除某个媒体类型,相当于"非"的意思,可以省略
only指定某个特定的媒体类型,可省略

4.常见断点

<768px 超小屏幕,一般是手机(max-width:768px)
>768px 小屏幕(min-width:768px)
>992px 中型屏幕,一般是平板(min-width:992px)
>1200px 电脑屏幕(min-width:1200px)

5.代码演示

长度宽度为500px、背景颜色为红色的盒子在窗口宽度变为500px以下时,盒子也随之变为长度宽度200px、背景颜色蓝色。

  <style>
    div{
        width: 500px;
        height: 500px;
        background-color: red;
        margin: 0 auto;
    }
    @media screen and (max-width:500px){
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    }
  </style>

6.页面适配

为了在移动端让页面获得更好的显示效果,我们必须让布局视口、视觉视口都尽可能等于理想视口。我们可以借助<meta>元素的viewport来帮助我们设置视口、缩放等

<meta name="viewport" content="width=device-width”, 
        initial-scale=1.0, 
        maximum-scale=1.0,
        minimum-scale=1.0,  
        user-scalable=no">

这段代码的几个参数解释:

width = device-width布局视口的宽度等于当前设备视口的宽度
initial-scale初始的缩放比例(默认设置为1.0)
minimum-scale允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale允许用户缩放到的最大比例(默认设置为1.0)
user-scalable用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值