viewport和@media查询

Posted 2020-10-16

一：什么是Viewport?

1. viewport 是用户网页的可视区域。

2. viewport中文翻译为“视区”

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

二：Viewport的作用

用于解决PC页面能在手机上正常显示，不会因屏幕变小而挤压布局导致页面排版混乱的问题。

三：设置Viewport

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

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

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

• height：和 width 相对应，指定高度。

• initial-scale：初始的缩放比例（默认设置为1.0）  

• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   

• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面。no时 minimum-scale 与 maximum-scale 可以不用写） 

四：什么是@media

@media可以根据不同的媒体类型定义不同的样式。

就是针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

 

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

五：@media使用

它有两种使用方式：

1. 直接在link中使用，通过media判断尺寸的大小在引入不同css文件

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

2. 直接在<style>标签里面设置

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype媒体类型有：

all　　用于所有设备

print　　用于打印机和打印预览

screen　　用与电脑屏幕，平板电脑，智能手机等（最常用的）

还有许多已废除

and，only和not三个关键字：

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）

only：only用来定某种特别的媒体类型

and：定义媒体的宽度区间

案例写法：

第一种方式写法

<link rel="stylesheet" type="text/css" media="screen and (max-width:1200px)" href="style.css">

 

当屏幕的宽度大于1200px时，应用style.css

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px) and (min-width:1200px)" href="style.css">

当屏幕的宽度大于992px，小于1200px时，应用style.css

第二种方式写法

@media screen and ( max-width: 768px ){

　　　　body{

　　　　　　background: blue;

　　　　}　　

}

当屏幕小于768px时，用此css样式

@media screen and ( min-width: 768px ) and （max-width: 992px）{

　　　　body{

　　　　　　background: red;

　　　　}　　

}

 当屏幕大于768px时，小于992px时，用此css样式

@media screen and ( min-width: 992px ){

　　　　body{

　　　　　　background: yellow;

　　　　}　　

}

当屏幕小于992px时，用此css样式

 补充：还有一个等于（其它的特性不在写了）

@media screen and (max-device-width:960px){

　　　　body{

　　　　　　background: yellow;

　　　　}　　

}

当等于960px时，用此css样式

横屏：@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }  

竖屏：@media screen and (orientation: landscape) { 对应样式 } 

 

注意：这些有CSS3和HTML5中特性，存在一定的兼容问题，处理如下

引入兼容JS文件

<!--[if lt IE 9]>

　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

1. <meta http-equiv="X-UA-Compatible" content="IE=edge">

 （如果想使用固定的IE版本，可写成：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">）

 

不过我最近又发现了一个更给力的写法：

1. <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

参考与引用：http://blog.csdn.net/inuyasha1121/article/details/50777116