响应式页面-@media介绍

最新推荐文章于 2019-08-23 14:21:59 发布

weixin_30455067

最新推荐文章于 2019-08-23 14:21:59 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/Tang854416/p/9761381.html

版权

一、为什么要写自适应页面（响应式页面）

保证页面在不同大小屏幕上能正常显示。不会导致页面变形。

CSS3的@media查询

@media查询作用：可以根据不同屏幕尺寸设置不同样式，在不同浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。

开始编写响应式页面

准备工作设置Meta标签

首先我们使用@media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

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


width = device-width：宽度等于当前设备的宽度

initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）

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

准备工作2 ：加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个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]-->

准备工作3

设置IE渲染方式默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，
但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
ps:这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，
如果没有安装，就显示IE最新的渲染模式。

 

代码示例：

1、如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (min-width: 1170px) {
    body {
        background-color:lightblue;
    }
}
从上面的代码可以看出，媒体类型是屏幕（screen），使用 一个 and 连接后面的媒体功能，这里写的是 max-width:300px ，也就是说，当屏幕的最大宽度 大于于等于 1170px 的时候，就应用花括号里面的样式。

2.如果文档宽度大于等于 992px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (min-width: 992px) {
    body {
        background-color:red;
    }
}
3、当文档宽度大于等于 768px 并且小于等于992px （ width >=768 && width <=992）的时候显示的样式

@media screen and (min-width:768px) and (max-width:992px) {
    /* CSS 代码 */
}
需要注意的是：

不要被 min-width 和 max-width 所迷惑，初学者很容易误以为 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，
其实它的意思是：当设置了 min-width 的时候，文档的宽度如果小于设置的值，就不会应用这个区块里的CSS样式，
所以 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。

移动单位介绍

在CSS中W3C文档把尺寸单位划为两类：相对长度单位和绝对长度单位

然而相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。

字体相对单位有：em  ex  ch   rem 

视窗相对单位有：vw   vh   vmin   vmax

绝对定位这是固定尺寸，他们采用的是物理度量单位：cm mm in  px pt 以及pc ，但在实际应用中我们使用最多的是em rem  px 以及百分比（%）来度量页面元素的尺寸。

PX： 绝对单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸下的设备错位

%：相对定位相对父级大小进行定位
缺点：能确定范围的还是比较好计算的，队友不太好确定的地方一般不好使用百分比，并且导致变形，高度一般不好控制

em：相对定位     em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每一个人容器字体大小不一致，那么计算会非常麻烦

转载于:https://www.cnblogs.com/Tang854416/p/9761381.html