js页面自适应屏幕大小自适应网页设计.docx

1、js 页面自适应屏幕大小自适应网页设计页面自适应屏幕大小自适应网页设计 js 页面自适应屏幕大小页面自适应屏幕大小 自适应网页设计 作者 varcyan 龙遨星海 varcyan，前端攻城炮炮兵，大学接触前端至今一直从事于前端开发的工作，前端对于我来说既是工作也是兴趣所在。龙遨星海，80后程序员，热爱编程，喜欢解决技术问题，体验成功的喜悦。摘要 如何在不同大小的设备上呈现同样的显示效果，实现在不同屏幕下自适应设计方案，达到统一 PC端和移动端的页面目标。本篇文章简要介绍一种实现方案。一、背景描述 随着网络的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是

2、，网页设计师和开发者不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者 iPhone/iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个 portal(入口)，会大大增加架构设计的复杂度。于是，很早就有人设想，能不能一次设计，普遍适用，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局(layout)？二、什么是自适应网页设计 自适应网页设计(英语：Responsive web design，通常缩写为 RWD)别名(响应式web设计)。

3、2010年，Ethan Marcotte提出了自适应网页设计这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是福尔摩斯历险记六个主人公的头像。如果屏幕宽度大于 1300像素，则 6 张图片并排在一行。如果屏幕宽度在 600 像素到 1300像素之间，则 6张图片分成两行。如果屏幕宽度在 400 像素到 600像素之间，则导航栏移到网页头部。如果屏幕宽度在 400 像素以下，则 6张图片分成三行。自适应网页设计简单来说是一个网站的布局能够兼容多个不同终端，而并不是传统的 pc端一套页面，移动端一套页面。三、自适应网页设计采用技术 1、控制视口(viewport)

4、控制视口这一点不论是响应式、自适应还是移动端布局都是最重要的。我们常常会使用这一句：viewport 是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为 1.0，即网页初始大小占屏幕面积的 100%。视口宽度等于设备宽度，初始缩放比最大缩放比与最小缩放比均为 1，禁止用户缩放。详细描述可查看 MDN-meta。在这里的设备像素比(dpr 即 deivcePixelRatio)也就是物理像素与设备独立像素的比值，常见的有 retina屏等。所有主流浏览器都支持这个设置，包括 IE9。对于

5、那些老式浏览器(主要是 IE6、7、8)，需要使用 css3-mediaqueries.js。2、CSS 的媒体查询(media query)使用media 查询，你可以针对不同的媒体类型定义不同的样式。请看下例：media only screen and(max-width:480px)header.top.tel,header.top ul li:nth-child(3),header.top ul li:nth-child(4)display:none;这个代码片意思是当设备视口宽度达到 480px 时对 li 于.tel 进行处理。media query的详情可以查看 MDN-media。对于 IE9以下浏览器我们需要引入一个关于 media query 的 polyfill(可以理解为补丁包)，css3-mediaqueries.js 或者 respond.js。这种方式需要设计师针对不同尺寸的设备进行设计，开发者进行针对不同尺寸的相应样式编写。但是这样带来的问题也越发让开发者心烦意乱，最重要的一点就是兼容各种设备会导致 大量累赘的代码，维护与重构较麻烦。