如何构建一个响应式网站 - 网站源码_资源分享

甚么是积极响应式web中文网站

从前我写网的页面生活习惯的页面都是定宽的，比如说最内层增设两个长度为980px的箱子，这原因在于那时候的页面主要表明在pc端上，而pc端表明器的大小不一差别不会特别大。只好一般来说长度的式样读法成为了盛行态势。但随着移动互联网的来临，电子设备类别的激增，如智能机，智能手机。所以萤幕大小不一的差别也就突显出了，如果每两个萤幕电子设备长度写两个式样的话，会发现存在大量多次重复的式样标识符，且工作效率会非常大，只好我们须要一种增加多次重复式样，让式样能手动适应环境萤幕的化解方案就出了：”积极响应式”。

他们知道相同的电子设备保有相同萤幕大小不一即视口(viewport)，所以他们不可能两个式样适应环境大部份的萤幕大小不一，所以积极响应式化解的就是中文网站手动去辨识相同萤幕，然后去使用相关联的式样去适应环境萤幕。注：“视口”(viewport),指表明页面的地区

积极响应式的关键技术

1.viewport特性

为了能让他们的页面去适应环境萤幕的大小不一，他们须要加进一个meta特性

width=device-width：把长度增设为电子设备长度（手动适应环境萤幕长度）user-scalable：不容许使用者翻转（容许使用者缩放视口大小不一，会增加维数）initial-scale=1.0：调用翻转比率minimum-scale=1.0：最轻翻转比率

2.新闻媒体查阅

自此他们化解了让页面手动适应环境相同的视口大小不一，但相同的视口大小不一要表明相同的式样，他们还须要借助于新闻媒体查阅来完成。

CSS3规范化分为很多组件，新闻媒体查阅（3级）只是其中两个组件。利用新闻媒体查阅，能依照电子设备的能力应用领域某一的CSS式样。比如说，能依照视口长度、萤幕x1080和朝著（水平还是横向）等，再加录于CSS标识符就发生改变文本的表明方式。新闻媒体查阅得到了广为实现。除有名的IE（8及下列版），基本上大部份应用领域程序都全力支持它。

新闻媒体查阅的句法

说了这么多新闻媒体查阅长甚么模样呢，他们来看一点示例标识符。

div { background:green } @media screen and (min-width:350px){ div { background:red } }

@media表示新闻媒体查阅标识符，上面的文本含义是，如果是萤幕电子设备，并且视口长度大于等于350px所以就会把div的背景颜色增设为红色，由于标识符是由上向下循序解析的，所以，背景色红色会覆盖上面的背景色绿色的标识符。

注：因为他们接触的电子设备都是有萤幕的所以screen能省略在 link 标签中使用新闻媒体查阅

这里会告诉应用领域程序，视口长度大于等于350px时才加载index.css式样文件。

@import 中使用新闻媒体查阅

@import url(“base.css”) screen and (max-width:350px);

css中能通过import来导入其他的式样文件，这里告诉应用领域程序视口长度大于等于350px时才加载base.css式样文件。

在css中使用新闻媒体查阅

@media screen and (min-width:350px){ div { background:red } }

这里告诉应用领域程序视口长度大于等于350px时把div的背景色增设为红色。

新闻媒体查阅中全力支持的特性

其他新闻媒体查阅最常用的特性就是min-width和max-width，其他的特性你可能一辈子都用不上

width：视口长度。height：视口高度。max-width：最大视口长度min-width：最轻视口长度device-width：渲染表面的长度（能认为是电子设备萤幕的长度）。device-height：渲染表面的高度（能认为是电子设备萤幕的高度）。orientation：电子设备方向是水平还是横向。aspect-ratio：视口的x1080。16∶9的宽屏表明器能写成aspect-ratio:16/9。  color：颜色组分的位深。比如说min-color:16表示电子设备至少全力支持16位深。color-index：电子设备颜色查找表中的条目数，值必须是数值，且不能为负。monochrome：单色帧缓冲中表示每个像素的位数，值必须是数值（整数），比如说

monochrome: 2，且不能为负。resolution：萤幕或打印分辨率，比如说min-resolution: 300dpi。也能接受每厘

米多少点，比如说min-resolution: 118dpcm。  scan：针对电视的逐行扫描（progressive）和隔行扫描（interlace）。例如720p HD TV（720p

中的p表示progressive，即逐行）能使用scan: progressive来判断；而1080i HD TV

（1080i中的i表示interlace，即隔行）能使用scan: interlace来判断。grid：电子设备基于栅格还是位图。

3.积极响应式图片

开发者不可能知道或预见浏览中文网站的大部份电子设备，只有应用领域程序在打开和渲染文本时才会知道使用它的电子设备的具体情况（萤幕大小不一、电子设备能力等）。另一方面，只有开发者（你和我）知道自己手里有几种大小不一的图片。比如说，他们有同一图片的三个版，分别是小、中、大，分别相关联于相应的萤幕大小不一和分辨率。应用领域程序不知道这些，他们得想办法让它知道。

简言之，难点在于他们知道自己有甚么图片，应用领域程序知道使用者使用甚么电子设备访问中文网站以及最合适的图片大小不一和分辨率是多少，两个关键因素无法融合。

使用picture元素

以上标识符会依照视口长度来适应环境使用相同的图片，如果视口长度大于等于750px所以使用source-medium.js图片，否则，如果视口长度大于等于350px使用source-small.jpg图片，否则都不满足条件使用source.jpg图片。这里source的顺序很重要，依照min-width大小不一按顺序进行编写，相反如果使用max-width就须要倒序编写。这样就能依照相同大小不一视口使用相同大小不一的图片。

max-width

img { max-width: 100%; }

这里声明max-width，就是要保证大部份图片最大表明为其自身的100%（即最大只能表明为自身所以大）。此时，如果包含图片的元素（比如说包含图片的body或div）比图片固有长度小，图片会翻转占满最大可用空间。

为甚么不用width:100%?

如果使用width:100%的话所以，图片的长度就会是父容器的长度，如果父容器的长度大于图片的真实长度，所以图片就会被拉伸变形。而max-width：100%则不会，因为长度默认是auto所以会表明真实长度，如果长度大于父容器长度，也会等比率翻转到父容器长度

4.弹性布局

在很早很早之前，中文网站的长度大都以百分比形式定义。百分比布局使得页面长度能随着查看它们的萤幕窗口大小不一变化，因而得名弹性布局。后来出现了一般来说长度的布局方式，现如今，他们要做积极响应式设计了，又得回头捡起弹性布局设计。相信前端人员都用过flexbox，使用起来也非常的爽，之前横向居中，瀑布流等写起来非常痛苦，但flexbox就很方便的化解了这些问题。

前缀

flexbox是css3中的特性，所以为了兼容各种应用领域程序须要加进各种应用领域程序相关联的前缀，一下提供手动加前缀的方法：

1.使用智能的IDE,如：webstorm，它能手动加进前缀2.使用compass3.使用Autoprefixer （https://github.com/postcss/autoprefixer）

主要特性

display:flex

声明你的箱子是两个flexboxflex-direction

声明主轴的方向flex中没有水平和横向的说法，只有主轴和侧轴的说法，比如说，flex-direction:row，所以你的主轴方向为水平方向，侧轴方向为横向方向，只好，justify-content: center以主轴方向对齐即当前为水平方向对齐，align-content: center以侧轴方向对齐即当前为横向方向对齐，flex-direction:clunm反之亦然flex-wrap

主轴方向是否全力支持换行justify-content

主轴方向对齐方式align-content

侧轴方向对齐方式flex

子箱子在父箱子中占的比率