标签：指定 block func 含义 deb soft 一个 tiny 必须
说明：rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定。
代码：
<meta name="viewport" content="width=device-width, initial-scale=1" />
说明：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
<!-- [if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif] -->
说明：
1、CSS代码不能指定像素宽度：width:xxx px;
2、只能指定百分比宽度：width: xx%;或者width:auto;
说明：“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
说明:“自适应网页设计”的核心，就是CSS3引入的Media Query模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。 例：
<!--如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。--> <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /> <!--如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。--> <link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
说明：同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
例 ：
/* 如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto）， sidebar块不显示（display:none）。 */ @media screen and (max-device-width: 400px) { .column { float: none; width:auto; } #sidebar { display:none; } }
说明：除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码：img { max-width: 100%;}
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码：img { max-width: 100%;}
图片【img】
img{ width: 100%; max-width: 50rem/em; }
//当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
//注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
//总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px‘;//其中“20”根据你设置的html的font-size属性值做适当的变化 }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded‘, recalc, false); })(document, window);
| 屏幕 | 范围 |
|---|---|
| 超小屏幕 | (移动设备) w<768px |
| 小屏设备 | 768px-992px 768 <= w <992 |
| 中等屏幕 | 992px-1200px 992 =< w <1200 |
| 宽屏设备 | 1200px以上 w>=1200 |
(1)、
@media mediatype and|not|only (media feature) { id、class、属性...{} }
(2)、
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
| 值 | 描述 |
|---|---|
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
标签：指定 block func 含义 deb soft 一个 tiny 必须
原文地址：https://www.cnblogs.com/huoqin/p/13207301.html
