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

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

《js页面自适应屏幕大小自适应网页设计.docx》由会员分享，可在线阅读，更多相关《js页面自适应屏幕大小自适应网页设计.docx（6页珍藏版）》请在冰豆网上搜索。

js页面自适应屏幕大小自适应网页设计页面自适应屏幕大小自适应网页设计js页面自适应屏幕大小页面自适应屏幕大小自适应网页设计作者varcyan龙遨星海varcyan，前端攻城炮炮兵，大学接触前端至今一直从事于前端开发的工作，前端对于我来说既是工作也是兴趣所在。

龙遨星海，80后程序员，热爱编程，喜欢解决技术问题，体验成功的喜悦。

摘要如何在不同大小的设备上呈现同样的显示效果，实现在不同屏幕下自适应设计方案，达到统一PC端和移动端的页面目标。

本篇文章简要介绍一种实现方案。

一、背景描述随着网络的普及，越来越多的人使用手机上网。

移动设备正超过桌面设备，成为访问互联网的最常见终端。

于是，网页设计师和开发者不得不面对一个难题：

如何才能在不同大小的设备上呈现同样的网页？

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本。

这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

于是，很早就有人设想，能不能一次设计，普遍适用，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

二、什么是自适应网页设计自适应网页设计（英语：

Responsivewebdesign，通常缩写为RWD）别名（响应式web设计）。

2010年，EthanMarcotte提出了自适应网页设计这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

他制作了一个范例，里面是福尔摩斯历险记六个主人公的头像。

如果屏幕宽度大于1300像素，则6张图片并排在一行。

如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。

如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。

如果屏幕宽度在400像素以下，则6张图片分成三行。

自适应网页设计简单来说是一个网站的布局能够兼容多个不同终端，而并不是传统的pc端一套页面，移动端一套页面。

三、自适应网页设计采用技术1、控制视口（viewport）控制视口这一点不论是响应式、自适应还是移动端布局都是最重要的。

我们常常会使用这一句：

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

视口宽度等于设备宽度，初始缩放比最大缩放比与最小缩放比均为1，禁止用户缩放。

详细描述可查看MDN-meta。

在这里的设备像素比（dpr即deivcePixelRatio）也就是物理像素与设备独立像素的比值，常见的有retina屏等。

所有主流浏览器都支持这个设置，包括IE9。

对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

2、CSS的媒体查询（mediaquery）使用media查询，你可以针对不同的媒体类型定义不同的样式。

请看下例：

mediaonlyscreenand（max-width:

480px）header.top.tel,header.topulli:

nth-child（3）,header.topulli:

nth-child（4）display:

none;这个代码片意思是当设备视口宽度达到480px时对li于.tel进行处理。

mediaquery的详情可以查看MDN-media。

对于IE9以下浏览器我们需要引入一个关于mediaquery的polyfill（可以理解为补丁包），css3-mediaqueries.js或者respond.js。

这种方式需要设计师针对不同尺寸的设备进行设计，开发者进行针对不同尺寸的相应样式编写。

但是这样带来的问题也越发让开发者心烦意乱，最重要的一点就是兼容各种设备会导致大量累赘的代码，维护与重构较麻烦。