如今响应式设计如此流行，那么如何才能做好一个响应式网站呢？

以下，是我的顺道课堂教学归纳出来的，简约简练。如果你懂一点基础的HTML+CSS科学知识，你就能专业委员会积极响应式结构设计。与此同时，外加积极响应式产业布局的关键性标识符撷取，可供大家珍藏先进经验。局限性，还望海涵。因为我不是业余后端工程师，实为特长撷取。

做积极响应式页面结构设计，如果你认知了页面为什么会【积极响应】、根据什么来【积极响应】的下层方法论，这一切都奥尔奈了。接着要搞好两个积极响应式中文网站，一是需要你有良好的排印与审美观，由此可见是得有冷静去慢慢增容。

积极响应式页面结构设计的基本概念

首先，他们知道两个页面其实是两个HTML（LZ77记号词汇）文件格式，HTML文件格式记号了页面中的相片、文本、超级链接、配置文件….等原素，而CSS（竹节式样）也是一种计算机系统记号词汇，透过CSS记号词汇，他们能记号HTML文件格式中的相片、文本、超级链接、配置文件…等原素以哪种外形式样呈现出。

比如说我能透过CSS增设相片在HTML文件格式过程中将，与否呈现出梯形、与否加前面板、与否为灰色、或模糊不清的式样。与此同时他们的CSS，还能透过其便携式的新闻媒体查阅特性来【推论】表明询问处的长度，接着针对不同的询问处长度，来增设HTML原素的CSS外形式样。

比如说在同两个HTML文件格式中的同一个行文本，当在大尺寸的萤幕上表明时，他们能给他增设Villamblard的明甫，也不致内容外溢；而在小萤幕智能手机上后，能增设更小的明甫，突显其更加干净的平面媒体效果。这般几番操作下来，那个页面是积极响应式的了。

其中，CSS的那个新闻媒体查询记号，是积极响应式结构设计的最关键性的标识符。诗歌创作：

@media (推论前提) { /*当满足推论前提成立时，就执行这里面写的CSS式样。*/ }

例如，当表明询问处的长度小于1300画素时，页面中的相片<img>就转变成棕色，其CSS式样就能诗歌创作：

@media (min-width: 1300px) { img{ filter: grayscale(100%); } }

浏览器效果：

点击查看动图（积极响应式效果）

如图所示：浏览器长度拖到1200px~1300px之间时，相片就表明为彩色，相片小于1300px时，相片就表明为棕色。所以，什么是积极响应式？这这这这这是。

好，现在他们明白了积极响应式的基本概念，接下来，他们再玩个花样。

他们让相片梯形，随着浏览器询问处长度不断缩小，相片的梯形就逐渐变大。

那么其CSS式样，他们能这样依次递进写下来：

@media (min-width: 1100px) and (max-width:1200px){ img{ border-radius: 20px; } } @media (min-width: 1000px) and (max-width:1100px){ img{ border-radius: 40px; } } @media (min-width: 900px) and (max-width:1000px){ img{ border-radius: 60px; } } @media (min-width: 800px) and (max-width:900px){ img{ border-radius: 80px; } } @media (min-width: 700px) and (max-width:800px){ img{ border-radius: 100px; } } @media (min-width: 600px) and (max-width:700px){ img{ border-radius: 120px; } } @media (min-width: 500px) and (max-width:600px){ img{ border-radius: 140px; } }

浏览器效果：

积极响应式效果

小结

透过上面的案例，他们能看到：做积极响应式页面，其实最主要的是要专业委员会灵活运用CSS3的@media新闻媒体查阅，增设好萤幕长度（或者叫询问处长度）的分界点，接着根具不同的新闻媒体萤幕长度，单独增设式样，精心调教，即可做出两个体验完善的积极响应式中文网站。

再来个中文网站实例（www.ui100.top）

比如说我之前做的那个【全链路UI结构设计网】，就采用了积极响应式产业布局，页面完全兼容大体积的PC、iPad pro、iPad、最新的iPhone，以及更早的iPhone SE，总之是根据页面可能出现在的设备中，我都单独做了CSS式样微调，以确保用户都能看到两个体验完整的页面，虽然我的后端技术很一般，但是我能想得到的点，我一定会把它做得最好。

PC端体积

那个中文网站首页，在电脑PC端呈现出的是下图式样：

△此时导航栏处的logo、slogan、目录、报名咨询按钮得到完全展示，符合鼠标精准点击的交互习惯。这种式样的呈现出，是基于【萤幕长度＞1300画素】来增设的，导航栏<header>标签下的.container容器长度，以及其他DIV产业布局下的.container容器长度都被被限制在1206px。

这是针对PC端实现积极响应式产业布局的关键性CSS式样：

/* PC端的单独式样，写在里面就能了*/ @media (min-width: 1300px){ .container { width: 1206px; } }

iPad Pro体积

接着，当萤幕长度缩小，就过渡到了iPad pro的体积时，由于ipad pro本身体积也不小，所以页面整体产业布局并没有太大变化，只是在此种情况下【992画素 < 萤幕长度 < 1299画素】，我将主标题的明甫减小了，与此同时视频右侧的课程目录列表相对于PC版省略了【课时】两个汉字，让整个平面媒体显得不那么拥挤。这同样只需用HTML+CSS配合，即可实现，得到如图：

同样的，此时DIV产业布局下的.container容器长度都被被限制在1206px。这是针对iPad端实现积极响应式产业布局的关键性CSS式样：

/* iPad pro端的单独式样，写这里面就能了*/ @media (max-width: 1299px) and (min-width: 992px){ .container { width: 970px; } }

iPad体积

当萤幕长度缩小到到 768px~991px时，就让页面的长度匹配ipad竖屏的萤幕长度，此时页面会呈现出下面这样的式样：

△注意看，此时的导航栏右侧的目录，已经被隐藏起来了，点击右上角按钮可展开菜单。与此与此同时，页面明甫变得更小了，立即报名、报名咨询按钮，则出现在了萤幕底部，符合ipad手指点击交互的规律。还有是课程目录，从之前的【视频右侧】变换到了【视频下侧】列表横向排列。

此时的HTML文件格式，依然是之前那个文件格式，只是针对当前的萤幕体积状态，单独增设了其CSS式样，就能达到这般适应iPad设备的效果，所以，什么是积极响应式？这这这这这是。

这是针对iPad端实现积极响应式产业布局的关键性CSS式样：

/* iPad端的单独式样，写这里面就能了*/ @media (max-width: 991px) and (min-width: 768px){ .container { width: 970px; } }

iPhone体积

接着，同样的套路增设智能手机萤幕的新闻媒体查阅分界点。当萤幕小于ipad长度体积，就能让页面的长度去匹配智能手机的展示特性了。

/* iphone以及智能手机端的单独式样，写这里面就能了*/ @media ( max-width: 767px){ .container { width: 95%; } }

…

这般往复，直到透过media新闻媒体查阅，增设完最小设备iPhone SE的单独式样，那个页面基本上就做到了全面兼容了。期间，需要注意要分离共用CSS样式，以减少重复标识符，提升页面性能。

特殊情况的积极响应式

如遇个别特殊情况，能配合JavaScript来处理积极响应式，我的原则是：CSS3能解决的，尽量不用JS。比如说在那个页面中，详情页的配图，有两套，一套是适应大萤幕（PC+iPad pro），如图：

大萤幕-详情图

一套是适应移动小萤幕（iPad + iPhone、以及更小设备），如图：

小萤幕-详情图

如果说，只是单纯的透过CSS的@media查阅来推论萤幕长度，接着用CSS的【display:none】或【display:block】去积极响应不同状态下详情图的隐藏或表明，那么这两套图在页面被访问时，都会与此同时加载，这必然会耗费更多服务器资源，影响页面打开速度。

积极响应式产业布局演示

而用户单次访问页面的设备体积通常都是固定的，没有谁会像我一样，拖着询问处变来变去，所以，基于此种情况下，我只需要反馈用户当下设备、当下询问处体积所需要的详情图即可了，而不必两套图都给他。所以，在那个页面单页中，我就要结合了JS，来删除用户不需要的详情图节点，积极响应不同设备的式样需求，与此同时亦能提升页面性能。