点选下方「web后端页面结构设计
积极响应式web结构设计这两年比较热，主要却是因为终端产品电子设备下载器的采用量已经稳步增长并今后很大可能超过PC端，也换句话说，今后页面的下载终端产品越来越多元化，采用者能通过图形界面笔记本电脑，笔记本笔记本电脑，智能手机，智能机甚至宽屏电视节目来下载中文网站。所以说， 让一个中文网站能在各种电子设备上亲善地呈现确实很重要，这也是做后端须要掌握的。但那时许多中文网站却是采用一般来说长度产业布局，最常见的就是960画素。这种一般来说长度结构设计在笔记本笔记本电脑上显示正好，但在许多图形界面大萤幕上两端博纳县许多，而且加上那时终端产品电子设备不断涌现，采用者更趋向采用终端产品电子设备来下载页面。因此，积极响应式web结构设计就变得至关重要。
概念积极响应式web结构设计是指他们结构设计与合作开发的页面能依照采用者的犯罪行为（比如说改变下载器的询问处大小）和相同的电子设备环境（比如说控制系统平台、萤幕解析度以及上领屏等）做出相应的积极响应来修正页面的产业布局，以提供采用者可交互的、简洁的阅读和操作新体验。积极响应式结构设计一般遵从“结构设计由亚姆，文本优先选择，终端产品优先选择”的原则。换句话说，假如一个页面想积极响应PC端和终端产品终端产品包括采用者的许多犯罪行为等，所以结构雕塑家至少须要结构设计三套以上页面的结构草图（PC端三套，终端产品终端产品三套），可视化结构雕塑家也须先依照终端产品展开可视化结构设计，把需求中最重要的文本展现在终端产品小萤幕上，然后后端技师依此结构设计合作开发出积极响应式架构。而目前最好的课堂教学方式是采用INS13ZD产业布局，灵巧性产业布局加媒体查阅。更加详尽的介绍资料请另行翻查！
INS13ZD产业布局INS13ZD产业布局是利用三套灵巧的液体分层控制系统构筑中文网站的产业布局。在一般来说产业布局中他们采用绝对测度基层单位画素px来产业布局，而在INS13ZD产业布局中采用相对测度基层单位比率（%）来展开产业布局。这么做的益处是会依照桌面的相同长度按比例来展开静态地修正分层的长度。
所以假如将一般来说产业布局变成INS13ZD产业布局呢，这里有一条公式：
目标元素长度 / 上下文元素长度 = 比率长度
举个简单的例子：
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>INS13ZD产业布局</title> <style type=”text/css”> /**一般来说产业布局* #wrapper{ width: 960px; margin: 0 auto; } #content{ width: 630px; margin-top:50px; margin-left: 10px; } #sidebar{ width: 285px; border-left: 5px solid #ddd; margin-top:50px; margin-left: 10px; margin-right: 10px; padding-left: 10px; }*/ /**INS13ZD产业布局**/ #wrapper{ width: 96%; /*最外层容器，相对于视口尺寸，将其设置为96%，也能100%，依照自己的须要*/ margin: 0 auto; } #content{ width: 65.625%; /*630 / 960*/ margin-top:50px; margin-left: 1.041667%; /*10 / 960*/ } #sidebar{ width: 29.6875%; /*285 / 960*/ border-left: 5px solid #ddd; margin-top:50px; margin-left: 1.041667%; /*10 / 960*/ margin-right: 1.041667%; /*10 / 960*/ padding-left: 1.041667%; /*10 / 960*/ } </style></head><body> <div id=”wrapper”> <div id=”content”>主要文本</div> <div id=”sidebar”>侧边栏</div> </div></body></html>上面的例子应该很直观吧，运用该式子就能计算出来。注意一点就是内外左右边距也应该依照上面的式子计算成比率，至于边框的话，假如不想使其随上下文长度改变而改变的话，能将侧边栏长度减去边框长度，这样边框就始终保持设置的画素了。INS13ZD产业布局虽好，但也有不足之处，就是在处理内外上下边距（比如说margin-top），行高，字体大小等方面不是很好，在大萤幕太大，在小萤幕太小。所以就须要采用灵巧性产业布局来解决这些问题。
灵巧性产业布局
灵巧性产业布局主要是采用相对测度基层单位em。em的实际大小是相对于其上下文的字体大小而言的。还有一个相对基层单位rem，它是相对于根元素的大小而言的。也支持如下式子：
目标元素尺寸 / 上下文元素尺寸 = 比率尺寸
例如：现代下载器默认文字大小为16px，假如#wrapper里他们设置了font-size:32px，则他们计算32px / 16px = 2em 。故他们能设置为 font-size：2em 。此时他们在#wrapper里加上一个<h1>标签，他们想将它字体大小设置为48px，则计算 48px / 32px = 1.5em ，故可将其设置为h1{font-size:1.5em;}，以此类推。
灵巧性图片：在现代下载器（包括IE7+）中要实现图片随着INS13ZD产业布局相应缩放很简单，只须要声明：
img{ max-width : 100%;}
这样就能使图片与容器自动匹配了。当然假如同时有两张图片并排展现，所以就改成50% 。这样虽然很简单就实现了他们想的效果，但前提是得准备一张大图片，至于怎么优化方法却是不少，这里就不讲了，请另行搜索！
那时已经有许多CSS分层架构，比如说 Less Framework 、The 1140 CSS Grid 等等。 大家能另行搜索。
媒体查阅
标准却是请看W3C：http://www.w3cschool.cc/cssref/css3-pr-mediaquery.html ，里面对媒体类型和媒体特性有详尽的介绍。其中最常见的三种媒体类型是Screen 、All 和 Print 。
下载器支持：
★
常见的媒体类型引入方法主要有：link 标签引用，xml方式，@import 和 CSS3的@media 。但主要却是link 标签引用 和 CSS3的@media ，假如考虑减少HTTP请求的话，那就采用CSS3的@media查阅。
★link方法，举例如下：
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”print”><link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen and (max-width:768px)”><link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen and (min-width:640px)”><link rel=”stylesheet” type=”text/css” href=”style.css” media=”all and (min-width:768px) and (max-width:1024px)”>@media方式，举例如下：@media screen and (max-width: 768px){ /*样式代码*/}@media screen and (min-width: 640px){ /*样式代码*/ }@media screen and (min-width: 768px) and (max-width: 1024px){ /*样式代码*/ }
@media引入媒体类型有两种方式：
1.在样式文件中引用媒体类型
2.在<head>标签中的<style>中引用
常用的媒体特性：
属性
值
是否有Min/Max前缀
描述
color整数有每种色彩的字节数color-index整数有色彩表中的色彩数device-aspect-ratio整数 / 整数有宽高比例device-heightlength有电子设备萤幕的输出高度device-widthlength有电子设备萤幕的输出长度grid整数没有是否基于栅格的电子设备heightlength有渲染界面的高度monochrome整数有单色帧缓冲器中每画素字节resolution解析度（dpi / dpcm）有解析度scanprogressive
interlaced没有电视节目机类型电子设备的扫描方式，progressive表示逐行扫描，interlace表示隔行扫描widthlength有orientationportrait
landscape没有窗口的方向是纵向却是横向只要依照@media 媒体类型 and (媒体特性) { 样式代码 } 来采用即可。 若有相同媒体查阅采用同一样式，则采用逗号隔开。
not关键词：排除某种制定的媒体类型
@media not screen and (max-width: 768px){ /*排除小于等于768px长度的媒体类型*/}only关键词：指定某种特定的媒体类型
@media only screen and (min-width: 640px){ /*只支持大于等于640px长度的媒体类型*/}课堂教学
1.在<head>标签内引入：
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no” /><meta name=”format-detection” content=”telephone=no,email=no” />1第一句设置电子设备的长度为视图的长度，也就是禁止其默认的自适应页面的效果。
第二句设置禁止手机将页面上类似手机号码的数字串转换成能拨打电话。
可视区域meta标签的content属性值：
content属性值描述width可视区域的长度，其值能是一个具体数字或关键词device-widthheight可视区域的高度，其值能是一个具体数字或关键字device-heightinitial-scale页面首次被显示时可视区域的缩放级别，取值1.0时表示页面按实际尺寸显示，无缩放minimun-scale可视区域的最小缩放级别，表示采用者能将页面缩小到程度maximun-scale可视区域的最大缩放级别，表示采用者能将页面放大到程度user-scalable指定采用者是否能对页面展开缩放，yes / no★由于IE6~IE8不支持CSS3的媒体查阅，故须要加上以下这句以让它们支持：
★<!–[if lt IE 9]> <script src=”http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js”></script><![endif]–>一当然也能下载下来后在本地引用：https://github.com/scottjehl/Respond/
3.重置好样式：推荐采用 Normalize.css ：http://necolas.github.io/normalize.css/
4.采用INS13ZD产业布局加灵巧性产业布局，产业布局要语义化
5.采用媒体查阅设置主要断点：
@media screen and (min-width: 320px){ } @media screen and (min-width: 480px){ } @media screen and (min-width: 640px){ } @media screen and (min-width: 768px){ } /*有必要的话设置高于1024px*/ @media screen and (min-width: 1024px){ }当然视情况依照须要能设置次要断点，不过维护样式的工作量和成本会增加，依照须要另行决定。所以那时他们就能依照他们的断点来编写相同的样式，使他们的中文网站在相同电子设备上能亲善地呈现。
每天分享WEB后端最顶尖的资讯、讲义、干货、随时随地学习WEB合作开发!
咨询、建议、学习欢迎勾搭
：xs-web
“web合作开发”web合作开发入门讲义
点选底部“”
