如何进行自适应网页设计?

时间：2023-10-02 20:12:01 | 来源：网站运营

时间：2023-10-02 20:12:01 来源：网站运营

如何进行自适应网页设计?：1.背景介绍

现在人们通过手机浏览网页占了大多数，随着浏览方式的改变，网页实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。

2.知识剖析

由于移动设备越来越多的被人们使用，手机成为访问互联网的最常见终端，而我们设计的网页确是为了呈现在PC端。

手机的屏幕比较小，宽度通常在600像素以下，而PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。

3.常见问题

如何进行自适应网页设计

4.解决方案

1、在HTML头部增加viewport标签。

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0

把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

2、不使用绝对宽度

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

3、流动布局

流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

4、MediaQuery模块

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载a.css文件。

link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css

如果屏幕宽度在400像素到600像素之间，则加载b.css文件。

5.编码实战

demo

6.扩展思考

自适应与响应式的区别

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。但是无论怎样，他们主体的内容和布局是没有变的。

自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。

相比自适应网站，响应式网站省去了很多的控件，同时也省去了不少建立和维护的功夫。响应式布局就是一种流体，在按百分比缩放时也能相当的流畅。

使用响应式设计，你要记住所以的布局。这当然可能会使过程混乱，并且使设计更加复杂。这就意味着你应该专注于中等分辨率的视图，然后再用media querie调整为更低或更高的分辨率。 所以通常的做法是，在一个新的项目中使用响应式设计，在后期的改造中使用自适应设计。

自适应可用于改造现有的网站使其更好地适应移动端。这使你的设计可控制和开发多个特定的视图。你开发视图的数量完全取决于你，你的公司和全面的预算。然而，它也提供了一定量的控件（例如在内容和布局上），如此你便无须使用响应式设计。但当你设计多种分辨率时你会发现，在改变窗口大小的时候将会“跳出”布局。

自适应网站可以用于设计和开发一个拥有多个自适应视图的网站。所以这种设计通常用于改造网站。

---

如果你是前端小白或者打算转行进入前端这个行业，不知道未来该怎么学习，都可以加入我组建的自学团，每天一起打卡学习，分享学习资料，定期组织实战项目，匹配学习伙伴，我会严格监督你们的。

作者：IT修真院

原文链接：如何进行自适应网页设计?_IT修真院：初学者转行到互联网的聚集地-CSDN博客