手机的屏幕比拟小，宽度常日在600像素以下，而PC的屏幕宽度，普通都在1000像素以上（目前主流宽度是1366×768），有的还到达了2000像素。同样的内容，要在大小悬殊的屏幕上，都呈现出称心的效果，并不是一件随意马虎的事。
很多网站的处理办法，是为不同的设备供应不同的网页，比方特地供应一个mobile版本，或者iPhone / iPad版本。这样做固然担保了效果，但是比拟费事，同时要掩护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的繁芜度。
自适应是为理解决如何在不同大小的设备上呈现同样的网页。
3.常见问题
如何进行自适应网页设计
4.办理方案在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.扩展思考
自适应与相应式的差异
自适应是为理解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调度网页内容大小。但是无论若何，他们主体的内容和布局是没有变的。
自适应还是暴露出一个问题，如果屏幕太小，纵然网页能够根据屏幕大小进行适配，但是会觉得在小屏幕上查看，内容过于拥挤，相应式正是为理解决这个问题而衍生出来的观点。它可以自动识别屏幕宽度、并做出相应调度的网页设计，布局和展示的内容可能会有所变动。
相应式布局被大家熟知的一个主要缘故原由便是 twitter 开源了 bootstrap。
比较自适应网站，相应式网站省去了很多的控件，同时也省去了不少建立和掩护的功夫。相应式布局便是一种流体，在按百分比缩放时也能相称的流畅。
利用相应式设计，你要记住所以的布局。这当然可能会使过程混乱，并且使设计更加繁芜。这就意味着你该当专注于中平分辩率的视图，然后再用media querie调度为更低或更高的分辨率。 以是常日的做法是，在一个新的项目中利用相应式设计，在后期的改造中利用自适应设计。
自适应可用于改造现有的网站使其更好地适应移动端。这使你的设计可掌握和开拓多个特定的视图。你开拓视图的数量完备取决于你，你的公司和全面的预算。然而，它也供应了一定量的控件（例如在内容和布局上），如此你便无须利用相应式设计。但当你设计多种分辨率时你会创造，在改变窗口大小的时候将会“跳出”布局。
自适应网站可以用于设计和开拓一个拥有多个自适应视图的网站。以是这种设计常日用于改造网站。
