移动端响应式
Posted li-li
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端响应式相关的知识，希望对你有一定的参考价值。
一、css3的@media媒体查询
1、定义和使用
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要开发响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
语法：
@media mediaType and|not|only (media feature) { /*CSS-Code;*/ }
参数解释：
mediaType（媒体类型）：类型有很多，常用screen，用于电脑屏幕，平板电脑，智能手机等；
media feature：常用如下两种值：
max-width：定义输出设备中的页面最大可见区域宽度；
min-width：定义输出设备中的页面最小可见区域宽度；
2、开始编写响应式页面
a、准备工作一：设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
参数解释：
width=device-width：宽度等于当前设备的宽度；
initial-scale=1.0：初始的缩放比例（默认设置为1.0）
user-scalable=no：用户是否可以手动缩放（设置为no，我们不希望用户放大缩小页面）；
b、准备工作二：加载兼容文件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]-->
c、准备工作三：设置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最新的渲染模式。
d、代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<title>响应式页面</title>
<!--[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]-->
<style>
@media screen and (min-width: 1200px){
body{
background-color: red; // 屏幕宽度大于等于1200px时生效
}
}
// 屏幕宽度大于等于800px，小于等于1200px时生效
@media screen and (min-width: 800px) and (max-width: 1200px){
body{
background-color: green;
}
}
@media screen and (max-width: 800px) {
body{
background-color: yellow; // 屏幕宽度小于等于800px时生效
}
}
</style>
</head>
<body>
</body>
</html>
二、移动端单位介绍
CSS中，W3C文档把尺寸单位划为为两类：相对长度单位和绝对长度单位。
相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位：
字体相对单位有：em、ex、ch、rem；
视窗相对单位则包含：vw、vh、vmin、vmax几种；
绝对单位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是px、百分比（%）、em以及rem来度量页面元素的尺寸。
px：绝对（固定）单位；
缺点：任何情况下都是固定值，会导致布局在不同尺寸下的设备错位；
%：相对单位（会有影响发生变化）相对于父级（自身）大小进行定位；
缺点：能确定范围的还是比较好计算的，对于不太好确定值得地方不好使用百分比，并且会导致变形，高度一般不好控制；
em：相对单位 （会有影响发生变化） em=当前字体大小；
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦；
rem：(r = root)相对单位，只依赖html字体大小；
优点：响应式布局中应用；
示例：动态的修改根元素font-size的js代码：
/* 自执行函数 * 获得页面宽度后动态修改html上的fontsize * 320为iphone5设计稿下的页面宽度，如下设置后的页面在iphone5等宽屏幕上 * html的font-size会变为100px，即 1rem = 100px 1px=0.01rem * 所以设置元素尺寸的时候，如果测量设计稿 15px 则需设置尺寸为 (0.01*15)rem = 0.15rem */ !(function(doc, win) { var docEle = doc.documentElement; evt = "onorientationchange" in window ? "orientationchange" : "resize"; fn = function() { var width = docEle.clientWidth; console.log(width) width && (docEle.style.fontSize = 100 * (width / 320) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));
以上是关于移动端响应式的主要内容，如果未能解决你的问题，请参考以下文章