移动端响应式

时间 2019-12-09

标签移动响应栏目无线繁體版

原文原文链接

1、css3的@media媒体查询css

一、定义和使用html

@media 能够针对不一样的屏幕尺寸设置不一样的样式，特别是若是你须要开发响应式的页面，@media 是很是有用的。当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面，这对调试来讲是一个极大的便利。html5

语法：python

　　@media mediaType and|not|only (media feature) {
　　　　/*CSS-Code;*/
　　}

参数解释：css3

　　　　mediaType（媒体类型）：类型有不少，经常使用screen，用于电脑屏幕，平板电脑，智能手机等；chrome

　　　　media feature：经常使用以下两种值：浏览器

　　　　　　max-width：定义输出设备中的页面最大可见区域宽度；iphone

　　　　　　min-width：定义输出设备中的页面最小可见区域宽度；函数

二、开始编写响应式页面布局

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>

2、移动端单位介绍

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));