适配不同分辨率屏幕 - Hi, Sun - ITeye技术网站
博客分类：
如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大显示器），变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来，我们将了解一下怎样通过HTML5和CSS3 Media Queries（媒介查询）相关技术来实现跨设备跨浏览器的响应式Web设计方案。
范例效果预览
首先，我们来看看本篇范例的。打开该页面，拖拽浏览器边框，将窗口慢慢缩小，同时观察页面结构及元素布局是怎样基于宽度变化而自动响应调整的。
我（原文作者）使用media query的方式设计了一些，比如、、、、、和等。
我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的宽度设置由"固定"方式改为"液态"，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置于主内容部分的下方，整个页面变为单栏布局。
我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些结构，包括页头、主要内容部分、侧边栏和页脚：
&div id="pagewrap"&
&header id="header"&
&h1 id="site-logo"&Demo&/h1&
&h2 id="site-description"&Site Description&/h2&
&ul id="main-nav"&
&li&&a href="#"&Home&/a&&/li&
&form id="searchform"&
&input type="search"&
&div id="content"&
&article class="post"& blog post &/article&
&aside id="sidebar"&
&section class="widget"& widget &/section&
&footer id="footer"& footer &/footer&
IE是永恒的话题；对于我们使用的HTML5标签，IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件：
&!--[if lt IE 9]&
&script src="/svn/trunk/html5.js"&&/script&
&![endif]--&
HTML5块级元素样式
首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点，但还是需要在样式方面做些工作，将这些"新"元素声明为块级：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: }
主要结构的CSS
忽略细节，我们仍是将注意力集中在大问题上。正如在前文"概述"中提到的，默认情况下页面容器的固定宽度为980像素，页头部分（header）的固定高度为160像素；主要内容部分（content）的宽度为600像素，左浮动；侧边栏（sidebar）右浮动，宽度为280像素。
#pagewrap {
width: 980
height: 160
#content {
width: 600
#sidebar {
width: 280
截至目前的效果演示
目前我们只是初步完成了页面结构的HTML和默认结构样式，当然，并不包括那些与话题无关的细节实现问题。正如可以在中看到的，由于还没有做任何media query方面的工作，页面还不能随着浏览器尺寸的变化而改变布局。
CSS3 Media Query
终于开始说正事儿了。首先我们需要在页面中调用css3-mediaqueries.js文件，来帮助IE8或是之前的版本支持CSS3 media queries：
&!--[if lt IE 9]&
&script src="http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js"&&/script&
&![endif]--&
接下来，我们要创建CSS样式表，并在页面中调用：
&link href="media-queries.css" rel="stylesheet" type="text/css"&
当浏览器可视部分宽度大于650px小于980px时（液态布局）
将pagewrap的宽度设置为95%
将content的宽度设置为60%
将sidebar的宽度设置为30%
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
#content {
width: 60%;
padding: 3% 4%;
#sidebar {
width: 30%;
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10
当浏览器可视部分宽度小于650px时（单栏布局）
将header的高度设置为auto
将searchform绝对定位在top 5px的位置
将main-nav、site-logo、site-description的定位设置为static
将content的宽度设置为auto（主要内容部分的宽度将扩展至满屏），并取消float设置
将sidebar的宽度设置为100%，并取消float设置
@media screen and (max-width: 650px) {
#searchform {
#main-nav {
#site-logo {
margin: 15px 100px 5px 0;
#site-description {
margin: 0 0 15
#content {
margin: 20px 0;
#sidebar {
width: 100%;
margin: 0;
当浏览器可视部分宽度小于480px时
480px也就是iPhone横屏时的宽度。当可视部分的宽度小于该数值时，我们需要做以下调整：
禁用html节点的字号自动调整。默认情况下，iPhone会将过小的字号放大，我们可以通过-webkit-text-size-adjust属性进行调整。
将main-nav中的字号设置为90%
@media screen and (max-width: 480px) {
-webkit-text-size-adjust:
#main-nav a {
font-size: 90%;
padding: 10px 8
我们需要为图片设置max-width:100%和height:auto，来实现其弹性化。对于IE，仍然需要一点额外的工作：
max-width: 100%;
width: auto\9; /* ie8 */
弹性内嵌视频
同样的，对于视频，我们也需要做max-width： 100%的设置；但是Safari对embed的该属性支持不是很给力，所以我们以width： 100%来代替：
.video embed,
.video object,
.video iframe {
width: 100%;
iPhone中的初始化缩放
默认情况下，iPhone中的Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。我们可以使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。
&meta name="viewport" content="width=device- initial-scale=1.0"&
最终效果演示
该范例的最终演示正像我们在本文开始时看到的那样；另外记得，在条件允许的情况下，使用各种典型移动设备（iPhone、iPad、Android、Blackberry等）来检验页面的移动版本。
Media Query JavaScript
对于那些尚不支持media query的浏览器，我们要在页面中调用css3-mediaqueries.js
&!--[if lt IE 9]&
&script src="http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js"&&/script&
&![endif]--&
CSS Media Queries
实现自适应页面设计的关键之一，就是使用CSS根据分辨率宽度的变化来调整页面布局结构。
@media screen and (max-width: 560px) {
#content {
#sidebar {
width: 100%;
通过max-width:100%和height:auto实现图片的弹性化。
max-width: 100%;
width: auto\9; /* ie8 */
弹性内嵌元素（视频）
通过width:100%和height:auto实现内嵌元素的弹性化。
.video embed,
.video object,
.video iframe {
width: 100%;
字号自动调整的问题
通过-webkit-text-size-adjust:none禁用iPhone中Safari的字号自动调整
-webkit-text-size-adjust:
页面宽度缩放的问题
&meta name="viewport" content="width=device- initial-scale=1.0"&
浏览 21857
浏览: 1464614 次
来自: 杭州
java实现操作word中的表格内容，用插件实现的话，可以试试 ...
Maven多模块spring + springMVC + JP ...
博主还有wlsvm.zip这个压缩包吗？链接打不开了
f604a33a817e427最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做，难道连一个小小的手机网站难道都搞不定吗？其实手机网站就是一个微缩版的PC网站罢了！至于为什么觉得难、觉得无从下手。
段亮觉得有以下几点：
一、没有完整的思路和流程
就像做网站的流程一样，如果你能知道它的流程，我相信就不会觉得做手机网站难！真正难的是你没有思路。
二、把html5这门技术想的高深莫测
好像觉得学会用html5+css3做手机网站，就相当于学会了顶尖的绝世武功。其实你错了！不要把html5这玩意想的太高深，其实做手机网站，真正意义上用不到什么的html5的强大功能。(可能对于一些不懂什么技术的小白而言：你的手机网站是用HTML5+CSS3做的啊，简直牛逼呀！能用上目前互联网上最新最前沿的技术。其实明眼人一看，就知道是用什么技术做的。俗话说的好：&外行看热闹，内行看门道&)
好了扯了这么多，下面就说说怎么来开发移动手机网站吧！
基本上开发手机网站，可大致分为两大类。一类是用框架开发手机网站。一类是自己手写手机网站。
一、框架开发手机网站
一般用现在常用的开发框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..当然可能还有一些移动端开发的框架，这些我就没具体去研究过。
为什么说BootStrap是目前前端最火热的开发框架呢？
因为bootstrap自带响应式布局（栅格系统），而且能做到移动设备优先的原则。
运用bootstrap来开发网站有什么好处呢？
1.不懂设计也可以做网站
就算不懂设计，你的网页在Bootstrap的帮助下，也能拥有超高颜值。它强大的内置样式库让你的作品变成尤物。
主要体现在：字体文件和bootstrap自带的UI样式。（为广大不会UI设计的程序员，提供了福音）
你可以专心解决问题，冗繁的细节都丢给Bootstrap操心。可以做到一次开发，就可适配所有终端，并且能迅速上手并建出网站原型。还提供很多丰富的插件，就算你不会JS，基本能看懂常见的API，网站上的效果，基本能解决。
1.不遵循最佳实践
我们在使用Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一，HTML不再有语义，而且内容和表示不再分离。前端纯粹主义者会觉得这相当令人讨厌，以为它使可扩展性、重用性和维护性遇到了更大的挑战。
2. Bootstrap 太重
直接点说：就是CSS和JS有点点大。CSS压缩后115k,JS压缩后35k
如果你想要使用Bootstrap的所有功能，你应该好好考虑资源的加载时间。当然，对于一些地方这可能不是问题，但是在新西兰互联网不得不横跨太平洋，这时数据达到那儿将是很缓慢的。因此考虑你的目标市场。
相信任何框架都有它的优点，同时也是有它的缺点的。没有一个产品是很完美的，所以根据自身实际情况进行选择。至于一些其它框架暂时不做过多的解释了，相信只要你肯愿意百度一下，就可以找到你想要的答案。
移动手机端开发流程
二、手写手机网站
一般我们自己手动开发手机网站的话，基本可以划分两类来做到。一类是通过在网页头部添加meta标签进行实现（网页指html5的格式来开发）。另一类是通过CSS3的Media标签（媒介查询）来实现。不了解媒介查询的朋友，可以看看这篇文章：响应式布局。
在这里我们详细讲解下,利用添加meta标签来做手机网站。
基本在网页头部我们只需添加四个meta标签就可以实现一个手机网站的框架。我一起来看看是哪些meta标签。
1、添加viewport标签
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0& /&
详细属性：
width &---- &viewport的宽度（width=device-width意思是：宽度等于设备宽度）
height ------ &viewport的高度（height=device-height意思是：高度等于设备宽度）
initial-scale ----- 初始的缩放比例
minimum-scale ----- 允许用户缩放到的最小比例
maximum-scale ----- 允许用户缩放到的最大比例
user-scalable ----- 用户是否可以手动缩放
关于viewport的详细原理和知识点，各位就百度吧！在这里我就不做详细的讲解了。
2、禁止将数字变为电话号码
&meta name=&format-detection& content=&telephone=no& /&
一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！
3、iphone设备中的safari私有meta标签
&meta name=&apple-mobile-web-app-capable& content=&yes& /&
它表示：允许全屏模式浏览，隐藏浏览器导航栏
4、iphone的私有标签
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
它指定的iphone中safari顶端的状态条的样式
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
另外还有一个个性化的link标签，它支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标。比如手机腾讯网上的标签：
&link rel=&apple-touch-icon-precomposed& href=&/wap30/info/info5/img/logo_icon.png&&
不过腾讯对这个png图标的命名并不规范，常规我们要求文件名应为 apple-touch-icon.png 或 apple-touch-icon-precomposed.png ，前者的命名iOS会为这个图标自动添加圆角、阴影和高亮覆盖层，后者则不会添加这些效果。
手机网站基本框架代码：
&!doctype html&
&meta charset=&utf-8&&
&title&手机网站&/title&
&meta name=&keywords& content=&& /&
&meta name=&description& content=&& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0& /&
&meta name=&format-detection& content=&telephone=no& /&
&meta name=&apple-mobile-web-app-capable& content=&yes& /&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black&&
&meta name=&author& content=&duanliang, & /&
body{font-size:62.5%;font-family:&Microsoft YaHei&,A overflow-x: overflow-y:}
.viewport{ max-width:640 min-width:300 margin:0}
大家好！我是段亮，这是我的第一个手机网页哦！
下面是我做的基于微信二次开发的手机页面案例：
其实在移动端的开发让我纠结的是在字体单位上的选择。
随着CSS3的兴起，有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位，能实现响应式的那种。它是相对于html根元素来设置当前文字大小，或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。
原来大部分的人依旧是使用PX来布局，rem都用的少。目前来说，就移动端的淘宝首页就是采用rem来作为单位来布局的。关于使用rem单位这个问题以及它的好处：还得需要大神来解答这个问题，毕竟我也只是刚接触。
关于手机网站的调试问题
一般我们采用的：在浏览器调试+真机测试，因为浏览器毕竟只是一个模拟工具，实际开发的话，我们还得用真机去测试。
比如：（Android类手机，iPhone5、5s、6、6Plus...）
而在浏览器上测试，可以chrome（谷歌浏览器）的F12调试工具：有个手机样的小图标，点击就能模拟手机测试。
手机测试效果图
或者用火狐的测试工具：按shift+ctrl+M进行查看。
写在最后：其实等你真正熟悉做手机网站这套流程后，你会发现做手机网站没有你想象的那么难，真正难的是不知道如何去下手。对于移动端的JS效果可能和PC端有些不同，因为移动端有移动端的事件，这也是我为什么老是强调学JS，是学原生JS，而不是学Jquery。我的下篇文章就会讲到&为什么学JS要学原生JS&，喜欢的朋友可以关注下博客。(以上均是段亮个人经验，如有不足的地方可以指出，相互学习！)
觉得本篇文章，对你有帮助的话。你可以选择赞助段亮博客！支付宝： 因为有你的支持，我才走得更远！ (*^__^*) ...
本文由段亮博客原创出品，如需转载请注明出处。
本文出处：/learn/web/html5/304.html
您要是觉得段亮
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：18926次
排名：千里之外
原创：25篇
转载：81篇
(2)(17)(17)(8)(1)(4)(9)(12)(7)(1)(27)(2)(2)年数已久！！！技术更新太快，谨慎观看，不过作为了解一下思路还是可以的
在此呢，我只大略的谈一下在研究了px,em,rem,和手淘的做法之后，我所采用的做法及硬性规则；
我就不再过多的将上面三种单位的区别及好处了，因为这类文章太多了，自己百度去吧，只谈实际做法！
首先在CSS里要给html一个默认的font-毕竟你得知道，万一哪部分加载除了问题咋办，所以我设置font-size:10（好计算一点）
然后就是JS，这部分JS是用来动态的设置html的font-size；
(function (doc, win) {
/*初始化 默认宽度、字体、最小最大比例*/
var init_w = 640,
init_fs = 10,
max_scale = 1,
min_scale = 0.5;
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientW
if (!clientWidth)
var percentage = clientWidth / init_w;
percentage = percentage & max_scale?max_scale: percentage &min_scale?min_scale:
docEl.style.fontSize = init_fs * percentage + 'px';
if (!doc.addEventListener)
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
然后就是根据设计稿怎么制作页面了，先拿到640的设计稿（我们这边常用的），如果不是得话可以把图像大小改成640的；
然后比如一个DIV，设计稿上的大小为200*100；那么在CSS里面写法就是，width=20height=10（然后如果要兼容IE低版本的话，还是乖乖的用上px吧）
如果一些margin,padding也同理，当然可能有些特殊情况需要用到固定高度或者其它情况也可以用固定像素；
另外一种不用JS的方法，就是利用css3中的媒体查询来根据不同的屏幕大小来写定html的font-size；
font-size : 10}@media only screen and (min-width: 401px){
font-size: 6px !
}}@media only screen and (min-width: 428px){
font-size: 6.5px !
}}@media only screen and (min-width: 481px){
font-size: 7.25px !
}}@media only screen and (min-width: 569px){
font-size: 8.625px !
}}@media only screen and (min-width: 641px){
font-size: 10px !
不过说实话，我喜欢用JS来控制html的font-size；因为CSS的做法太死板了，还要自己先去算好（多累呀，对吧）；
后续可能会修改，完善，不足之处还请包涵。
仅作为个人笔记以供后期翻阅。
阅读(...) 评论()rem css3 app页面适配-学网-提供健康,养生,留学,移民,创业,汽车等信息
rem css3 app页面适配
给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的... 自适应几乎已经成为优秀页面布局的标准。 这篇文章主要讲的是rem的使用。 css3 中... 二、Vue 全家桶 我们接下来介绍全家桶的安装(使用详情大家可以去初始页面的链接查... &/style/base.scss&; &/style& 五、rem 适配 对于移动端的开发,rem 适配必...以需求来介入:都知道现在手机屏幕分辨率越来越多了,假设我们的网页需要适配的iphone4(320px),iphone6(375px),iphone6 plus(414px).我们的需求是,当用户浏览网... 82.8 width: 100%; height: 100%; overflow:"&具体大家可以去看【淘宝】的移动端…显示全部手机网站和pc网站的区别. 1、平台不一样 pc网站是在电脑上运行的,对于网页大小没有太大要求,所以可以有绚丽的美工,动态的展示效果.但是手机端就不一样了,因为手机屏幕明显要比电脑小很多,对于有动态效果或图片多的网站,打开速度将很慢,并且会花去用户很多流…显示全部我们公司(切图网)做了大量的webapp用rem做单位的,你可以参考一下 /examples谢邀. 如果是基于apicloud平台开发的话,我可以回答下. 我们平台对html的meta标签的viewport有要求,按照我们的helloapp初始项目去写,其中的 width=device-width比较关键.我们推荐设计稿按640*960出,然后量出的实际尺寸px除以2,直接用px为单位即可,其他的适配…显示全部而网上那些吹捧rem的文章,所用的响应式适配方案都是基于弹性布局的.流体布局?人家说了,流体布局不好,见 web app变革之2. vw逻辑非常清晰,"1vw = 1/... css3 would just need a unit relative to the root element's em -- say, 'rem' 之后有理由相信,rem…显示全部css3、es2015/es6、webpack/browserify、gulp/grunt、less/sass,然后还要掌握周边的各种辅助技术,如生成sourcemap方便调试,以及rem可以更好的适配多种不同尺寸的移动终端,此外还有很多细枝末节都需要不断的去积累.如果能够掌握以上的几个技术点,并且踩过不…显示全部某些情况下红米也会有这个问题.(最近刚刚遇到,已经被坑挂了).3、如果你想要使用css3的动画,那么一定要变着方式使用3d gpu加速的方式,不要试着left,height,... 屏蔽电话号码等功能很实用.(手机回答就不列举了).9、如果想要像手机淘宝那样的各个平台看起来展…显示全部一些常用的段落性文本标签会存在该问题.缩放失效问题需通过 js 动态设定 initial-scale.利用 rem 布局依照某特定宽度设定 rem 值(即 html 的 font-size),页面任何需要弹性适配的元素,尺寸均换算为 rem 进行布局;当页面渲染时,根据页面有效宽度进行计算,调整 …显示全部设置固定宽度的话,要做到适应,需要在js中计算页面缩放比例,在移动端浏览器表现还可以,但是对于android webview来说,就是个坑,需要在android app中配置支持,另外,scale小于1不支持,将width设为320时,致使scale大于1,这个是更普遍的做法.因,为,这,是,个,坑
您可能还关注:&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
大类导航： |