什么是自适应网页设计

现在移动互联网越来越热，用手机上网的人数大量增加。现在大家常用的手机的屏幕通常在600像素以下，PC的屏幕宽度一般都在1000-2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个手机版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，会大大增加架构设计的复杂度。 于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局？

2010年，Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词概念，这个自适应设计就是可以自动识别屏幕宽度、并做出相应调整的网页设计。保证了用户在不同终端浏览网页的兼容效果。

自适应 Web 设计工作原理:
为了应用自适应 Web 设计，您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载，该页面上使用了各种字体和 Web 开发技术，比如媒体查询（Media Queries），此时，会先检测设备的视口大小，然后加载特定于设备的样式。

自适应网站设计的CSS3代码原理:
现在在自适应 CSS 文件中必须有 '@media' 开始的样式。

'@media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式

'@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。

'@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最大宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

'@media (max-width: 979px)'

最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。


您可以用不同的终端来打开我公司网站。域名:www.xiaoercms.com，一看和测试就明白了。也可以在PC上拖动浏览器窗口，改变浏览器的宽度大小来测试体验。

小二CMS介绍

我们立足合肥，业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、富有创意、协作无间的专业技术团队，专注于将前沿技术通过高效简捷的途径呈现给客户，量身打造优质解决方案。我们致力于通过持续努力，成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴，协助客户在新经济时代敏锐捕捉商机，拓展发展空间，构筑强大竞争力。小二CMS专注企业数字化转型的智能建站与营销系统，提供从官网搭建、品牌推广到运营增长的一站式服务，助力中小企业低门槛拥有专业级互联网阵地。

网站建设 移动相关开发 营销推广与优化 域名主机邮箱 产品与技术 企业服务

了解全部业务

扫码咨询 · 关注微信