CSS3 媒体查询（media）与 Viewport

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/b954960630/article/details/82751327

@media

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

---

一、语法

1、样式表中的CSS媒体查询

@media mediatype and|not|only (media feature) {
    ·····················
}

<!-- 例子 -->
@media (max-width: 600px) {
	  #header {display: none;}
}

2、link元素中的CSS媒体查询

<link  rel="stylesheet"  media="mediatype and|not|only (media feature)" href="mystylesheet.css">

<!-- 例子 -->
<link rel="stylesheet" media="screen and (max-width: 800px)" href="example.css" />

二、media type

常用的：all 、screen、print

---

例子

1、响应式

屏幕宽度 小于等于960px时，执行它里面的CSS

@media srceen and (max-width:960px){ ````````}
//or
<link media="srceen and (max-width:960)"  rel="stylesheet"   type="text/css">

屏幕宽度 大于960px，小于1199px时，执行它里面的CSS

@media srceen and (min-width:960px)  and  (max-width:1199px){	·······}
//or
<link media="screen and (min-width:960px)  and  (max-width:1199px)"  rel="stylesheet"  type="text/css"   >

屏幕宽度 大于1199px时，执行它里面的CSS

@media screen and (min-width:1199px) {   ·······  }
//or
<link media="screen and (min-width:1199px)"   rel="stylesheet"   type="text/css" >

2、多个媒体类型

如果你想向最小宽度20em的手持设备或屏幕应用样式表，你可以使用这样的查询：

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

@media screen and (min-width:800px),print and (min-width:7in){·······}

---

Viewport

viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

一、语法

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

二、例子

（1）强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

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

（2）iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

<meta content="yes"   name="apple-mobile-web-app-capable">

（3）第三个也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

<meta content="black" name="apple-mobile-web-app-status-bar-style">

（3）告诉设备忽略将页面中的数字识别为电话号码

<meta content="telephone=no"  name="format-detection">