文章编号：27087 / 分类：互联网资讯 / 更新时间：2024-10-06 08:57:18 / 浏览：次

照应式网页设计是目前盛行的一种WEB设计方式，重要特征是页面规划能依据不同设施（平板电脑、台式电脑、自动手机）下能让内容顺应性的展现，从而让用户在不同设施都能够友好的阅读网页内容，照应式有点像自顺应的规划，但还有一点区别。

在谈关于照应式网页设计规划前，咱们先梳理下网页设计中全体页面排版规划，常常出现的重要有如下几种类型：

规划类型规划成功

驳回何种方式成功规划设计，也有不同的方式，这里基于页面的成功单位而言，分为四种类型：固定规划、可切换的固定规划、弹性规划、混合规划。

固定规划

以像素作为页面的基本单位，不论设施屏幕及阅读器宽度，只设计一套尺寸；可切换的固定规划

雷同以像素作为页面单位，参考干流设施尺寸，设计几套不同宽度的规划。经过设施的屏幕尺寸或阅读器宽度，选用最适宜的那套宽度规划；弹性规划

以百分比作为页面的基本单位，可以顺应必定范畴内一切尺寸的设施屏幕及阅读器宽度，并能完美应用有效空间展现最佳成果；混合规划

同弹性规划相似，可以顺应必定范畴内一切尺寸的设施屏幕及阅读器宽度，并能完美应用有效空间展现最佳成果；只是混合像素、和百分比两种单位作为页面单位。

可切换的固定规划、弹性规划、混合规划都是目前可被驳回的照应式规划方式：其中可切换的固定规划的成功老本最低，但拓展性比拟差；而弹性规划与混合规划成果具照应性，都是比拟现实的照应式规划成功方式。

只是关于不同类型的页面排版规划成功照应式设计，须要驳回不用的成功方式。

通栏、等分结构的适宜驳回弹性规划方式、而关于非等分的多栏结构往往须要驳回混合规划的成功方式。

规划照应

对页面启动照应式的设计成功，须要对相反内容启动不同宽度的规划设计，有两种方式：桌面优先（从桌面端开局向下设计）；移动优先（从移动端向上设计）；

无论基于那种形式的设计，要兼容一切设施，规划照应时无法防止地须要对模块规划做一些变动（出现规划扭转的临界点称之为断点），

咱们经过JS失掉设施的屏幕宽度，来扭转网页的规划，这一环节咱们可以称之为规划照应屏幕。常常出现的重要有如下几种方式：

规划不变，即页面中全体模块规划不出现变动，重要有：

模块中内容：挤压－拉伸；模块中内容：换行－平铺；模块中内容：删减－参与；

规划扭转，即页面中的全体模块规划出现变动，重要有：

模块位置变换；模块展现方式扭转：暗藏－倒退；模块数量扭转：删减－参与；

很多时刻，繁多方式的规划照应无法满足现实成果，须要联合多种组合方式，但准则上尽或者时坚持便捷笨重，而且同一断点内（出现规划扭转的临界点称之为断点）坚持一致逻辑。

否则页面成功得太过复杂，也会影响全体体验和页面功能。

作者：heyuchan

在pc端不思考移动端，前端做照应式规划的时刻，须要自顺应字体大小吗

前端开发中PC端和移动端网站的区别，重要是：1、PC端在开发环节中思考的是阅读器兼容性，移动端开发中思考的是手机兼容性疑问，做移动端开发，更多思考的是手机分辨率的自顺应和不同手机操作系统的稍微差异化；2、在局部事情的解决上，移动端人造是倾向于触屏的，另外包含移动端弹出的手机键盘该如何解决，这样的疑问在PC上必需不会遇到，但在移动端，假设你没有阅历，解决起来是相当费事的；3、规划上，移动端开发是要做到页面规划自顺应的，而PC端页面规划的比例会相对固定；4、在动画成果解决上，PC端要思考IE的兼容性，理论用JS做动画的通用性会好一些，但相比CSS3却就义了较大的功能，而在手机端，假设要做一些动画、特效等，第一选用必需是CSS3，既便捷，效率又高。

相关标签： 照应式网页设计规划、

本文地址：http://www.hyyidc.com/article/27087.html

上一篇：看完这篇文章便通晓如何使设计的网站在移动...
下一篇：如何测试一个网站能否是照应式设计如何测试...