计算机ipad手机组成,如何为自适应手机，计算机和iPad制作网页的摘要

2015年，越来越多的移动互联网用户超过了PC端. 随着2G，3G，4G，免费WIFI和无线基站的不断普及，越来越多的人正在使用手机访问Internet.

移动设备已经超过台式设备，成为访问Internet的最常用终端. 结果，网页设计师必须面对一个难题: 他们如何在不同尺寸的设备上呈现相同的网页？

手机的屏幕相对较小，通常小于600像素； PC的屏幕宽度通常超过1000像素(当前主流宽度为1366×768)，有些已经达到2000像素. 在不同的屏幕上显示相同的内容并获得令人满意的结果并不容易.

许多网站的解决方案是为不同的设备提供不同的网页，例如移动版本或iPhone / iPad版本. 当然，这可以保证效果，但是更麻烦，并且必须维护多个版本，并且如果一个网站具有多个门户，则将大大增加体系结构设计的复杂性.

因此，一些人早就设想可以“一次设计并普遍应用”，以便同一网页可以自动适应不同的屏幕尺寸并根据屏幕宽度自动调整布局？

首先，“响应式网页设计”的概念

2010年，Ethan Marcotte创造了术语“响应式Web设计”，该术语是指可以自动识别屏幕宽度并进行相应调整的Web设计.

他以《夏洛克·福尔摩斯历险记》中的六位英雄为首. 如果屏幕宽度大于1300像素，则将并排放置6张图片.

如果屏幕宽度在600像素到1300像素之间手机怎么打开ifly文件，则6张图片分为两行.

如果屏幕宽度在400到600像素之间，则导航栏将移至页面顶部.

如果屏幕宽度小于400像素，则6张图片分为三行.

mediaqueri.es拥有更多示例.

还有一个测试小部件，可以同时在网页上显示不同分辨率屏幕的测试结果. 我建议安装它.

第二，允许自动调整页面宽度

“响应式网页设计”如何实现？没那么困难.

首先，在网页代码的开头添加一行视口元标记.

视口是网页的默认宽度和高度. 上面的代码行意味着默认情况下，网页的宽度等于屏幕宽度(宽度=设备宽度)，并且原始缩放比例(初始比例= 1)为1.0，这是网页的初始值尺寸占屏幕面积的100％.

所有主流浏览器都支持此设置，包括IE9. 对于那些较旧的浏览器(主要是IE6、7、8)，您需要使用css3-mediaqueries.js.