怎样低成本的实现网页在移动端的适配 - 苏青 - ITeye技术网站
博客分类：
问题：同一个网页，在web端显示良好，在移动端访问可读性非常差。
目的：One page for all devices。网页在不同的设备打开，在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定的版本。
也就是我们常说的如何构建“响应式网页设计”(responsive web design)。
解决方案涉及到的知识点：
media query
Javascript window.matchMedia
响应式图片
iOS和Android自带的浏览器都是基于webkit内核，所以我们可以使用viewport属性和media query技术实现网站的响应性。
在&head&之中添加viewport元数据标签。
width=device-width 实现屏幕适配，页面绘制根据触屏大小变化，保持一致。
initial-scale 表示初始缩放。
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
maximum-scale 表示最大缩放比例，1意味着不能进行缩放。
user-scalable=no
禁用页面缩放（zooming）功能。禁用缩放后，用户只能滚动屏幕，让你的网站看上去更像原生应用。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
&meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&
media query
根据不同的分辨率，引用不用的css
&link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" /&
Bootstrap3的实现
以下是LESS方法的实现
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
用CSS3解决的确很方便，但某些场景下仍然需要JS技术。
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
// The screen width is less than 400px.
状态改变时监听
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider.
Set up or change things
// appropriately.
// The screen width is less than 400px.
Set up or change things
// appropriately.
var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);
大小：595B
检测浏览器是否支持media query和media type。
使用方法如下：
&script src=""&&/script&
//测试 'tv' 媒体类型
if (matchMedia('tv').matches) {
// tv media type supported
//测试移动设备的媒体查询
if (matchMedia('only screen and (max-width: 480px)').matches) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
//测试 landscape orientation
if (matchMedia('all and (orientation:landscape)').matches) {
// probably tablet in widescreen view
响应式图片
1、最简单的方法是为图片赋予了max-width: 100%;和height:属性，可以让图片按比例缩放，不超过其父元素的尺寸。Bootstrap 3定义为.img-responsive class。
&img src="..." class="img-responsive" alt="Responsive image"&
2、第一种方法不能解决图片模糊问题。使用CSS3的content属性，结合媒体查询，我们要为每种设备宽度分别准备图片。这种方法会下载多张图片。
@media (min-device-width:992px) {
img[data-src-992px] { content: attr(data-src-992px, url); }
@media (min-device-width:1200px) {
img[data-src-1200px] { content: attr(data-src-1200px, url); }
&img src="image.jpg"
data-src-992px="image-992px.jpg"
data-src-1200px="image-1200px.jpg" alt=""&
如果我们需要：
只下载需要的一张图片
面向未来技术。。。
大小：1.8K
简洁：基于库实现图片适配。在不支持js的浏览器下也有好的表现。
&script src="http://scottjehl.github.io/picturefill/external/matchmedia.js"&&/script&
&script src="http://scottjehl.github.io/picturefill/picturefill.js"&&/script&
&span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"&
&span data-src="small.jpg"&&/span&
&span data-src="medium.jpg"
data-media="(min-width: 400px)"&&/span&
&span data-src="large.jpg"
data-media="(min-width: 800px)"&&/span&
&span data-src="extralarge.jpg" data-media="(min-width: 1000px)"&&/span&
&!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --&
&noscript&
&img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"&
&/noscript&
这种方法会根据屏幕大小下载特定的图片，不会将所有定义的图片都下载，所以不用担心带宽的问题。
改变屏幕的宽度，会下载适配的图片，在WEB端也有良好的表现。
大小：7.42K
简介：使用这个插件的一个最重要的是：按需下载图片，避免移动端下载大图，减少访问带宽。
利用img的srcset标签，写法比较简洁。
&img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
banner-phone-HD.jpeg 100w 2x"/&
屏幕宽度为1440px出现的是banner.jpeg，iphone5上出现的是banner-HD.jpeg，Nexus出现的是banner-HD.jpeg。
iphone上准备的图片要比web上的图片大一倍。
Web浏览器测试结果：只加载src中定义的图片
定义更精确的屏幕范围，
src属性中定义 最小的图片(下面例子中的: banner.jpeg)
srcset属性中定义 最小图片和它相关连的最大viewport宽度(下面例子中的: banner-HD.jpeg 640w)
srcset属性中定义 更大的viewport宽度(下面例子中的: banner-phone.jpeg 1024w)
srcset属性中定义 支持的最大图片且不标注viewport宽度(下面例子中的: banner-phone-HD.jpeg)
&img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 640w, banner-phone.jpeg 1024w, banner-phone-HD.jpeg"&
Web浏览器测试结果：除了加载src中的图片，还根据屏幕大小（测试浏览器宽度1440px）加载了banner-phone-HD.jpeg。iphone5上出现的是banner-phone.jpeg，Nexus出现的是banner-phone.jpeg。
文件更小（但是多了一个依赖库）；WEB端页面下载后改变窗口大小，会下载适配的图片。但是，由于是从span标签通过js转为img标签，所以web端图片加载比srcset慢慢慢慢。。。
语法简洁；页面加载后，图片不会重新下载，适配性没有picturefill好。
这个可以看到两种效果：
页面加载时的资源请求状况
将窗口缩小又放大后，picturefill会不断请求适配图片，包括已经下载过的wedding-medium.jpg
6、Grunt的responsive images插件（暂时没用，先mark）
Bootstrap3的实现
Bootstrap 3中的新的网格系统允许根据设备大小通过变量来声明。
比如，你可以针对桌面环境设置4列布局，针对平板电脑设置2列布局，针对手机设置1列布局。
这样，你就可以很容易地控制你的页面的跨设备显示效果。
一个用Bootstrap3布局的
设置data-target="#b-menu-1"，对应导航。
&!-- fixed navigation bar --&
&div class="navbar navbar-fixed-top navbar-inverse" role="navigation"&
&div class="container"&
&div class="navbar-header"&
&button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b-menu-1"&
&span class="sr-only"&Toggle navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&a class="navbar-brand" href="#"&Bootstrap website&/a&
&div class="collapse navbar-collapse" id="b-menu-1"&
&ul class="nav navbar-nav navbar-right"&
&li class="active"&&a href="#"&Menu 1&/a&&/li&
&li&&a href="#"&Menu 2&/a&&/li&
&li&&a href="#"&Menu 3&/a&&/li&
&li class="dropdown"&
&a href="#" class="dropdown-toggle" data-toggle="dropdown"&&span class="glyphicon glyphicon-user"&&/span&&b class="caret"&&/b&&/a&
&ul class="dropdown-menu"&
&li&&a href="#"&Option 1&/a&&/li&
&li&&a href="#"&Option 2&/a&&/li&
&li&&a href="#"&Option 3&/a&&/li&
&/div& &!-- /.nav-collapse --&
&/div& &!-- /.container --&
&/div& &!-- /.navbar --&
同时boot可以定制折叠模式与水平模式的阈值
根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。
全屏问题：
bootstrap3的 .container做了适配定宽，可以添加一个id=“container”设置 #container { width: 100%; }
.row设置了margin-left: -15 margin-right:-15所以某些状况下会出现横向滚动条，清除这条样式就可以了 .row { margin-left:0; margin-right:0; }
定制折叠模式与水平模式的阈值
根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。
根据列的表单布局，使用更整洁的网格类
&div class="row"&
&div class="col-span-4"&
&label&&/label&
&div class="col-span-8"&
&input type="text"/&
Canvas绘制
在线测试你的网页
这个测试工具也可以帮助你判断某些网站到底是用前端技术，还是服务端实现手机访问。
Adobe Edge Inspect CC
同步开发测试工具，付费版可协同多设备，实时同步浏览器、无需刷新。
Responsive Design Weekly
浏览 12234
浏览: 108064 次
来自: 杭州
注册账号来赞你！
// IIFE - Immediately Invok ...
[color=orange][/color]
bootstrap demo实例教程源代码下载:http:// ...一步步教你使用rem适配不同屏幕的移动设备-爱编程
一步步教你使用rem适配不同屏幕的移动设备
1.先说说几个前端常用的几个单位的概论：
1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
4、rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
2.开始进入rem教程
1.先设置header里面的meta标签：
1 &meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"&
2.在header写上&script&标签
1 &script type="text/javascript"&
2 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
3 &/script&
问题：为什么要设置Html的font-size？
答：这里是设置html标签的font-size，上面概论红色字写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。
问题：上面的6.4怎么得来的？为什么要除以100？
答：注意红色字体是 （设计稿的宽度）/100 得出来的。这里的例子是以设计稿宽度为640px，所以640/100=6.4。主要是因为方便之后元素设置时的数值换算
问题：为什么是clientWidth/6.4?为什么要乘以100？
1.是因为这里是作为一个基础数值，换个方向去想，这里先不乘以100以免产生误解。
例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px，那么根据比率计算出实际设备里面宽度是：50*（320/640）=25px；首先这里没有问题，实际的上的宽度根据（320/640）这个比率计算出来了是25px，这个（320/640）相当于1rem。
1）为了计算方便 & 我们后面把比率乘以了100，（320/640）*100，那么相对应这个元素在设置数值的时候就需要除以100了,这样可以保证最后出来的数值不变，相当于0.5rem=50*（320/640），最终出来的数值一致。
2）一般浏览器的最小字体是12px，如果font-size=（320/640）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题*100后，font-size是50px，这样就棒棒的啊。
3.设置好html的font-size,那么我们下面就可以开始编写根据设计稿的例子了。
设计稿是640px，有一个红色盒子宽高都是320px，里面的文字是32px，那么下面是这个例子的代码。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Title&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1"&
&script type="text/javascript"&
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
&body style="margin: 0 ;padding: 0;font-size: 0.32rem"&
&div style="width: 3.2height: 3.2background: red"&
&span&danny.xie&/span&
1.在iphone5下的情况，设备的物理像素是320px
1.在iphone6下的情况，设备的物理像素是375px
&可以看到字体的大小和红色盒子的宽高跟设计稿上面的比例是保持一致的，这样就是rem适配不同设备的的基本用法，如上文有错误，欢迎指出和讨论，十分感谢。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。当前位置： >
移动app开发中多种设备尺寸适配问题
& & & & &移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入&杂屏&时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。
　　加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题?设计和开发之间采用什么协作模式?一个基本思路是：
　　1、选择一种尺寸作为设计和开发基准；
　　2、定义一套适配规则，自动适配剩下两种尺寸；
　　3、特殊适配效果给出设计效果。
　　手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。
　　第一步，视觉设计阶段，设计师按宽度750px(iPhone 6)做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。
　　第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。
　　第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局(auto layout)，方便后续适配到其它尺寸。
　　第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。
　　为什么选择iPhone 6作为基准尺寸?
　　当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6(750px/375pt)作为基准，基于几个原因：
　　1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。
　　2、iPhone 6 plus有两种显示模式，标准模式分辨率为，放大模式分辨率为(即iPhone 6的1.5倍)。可见官方系统里iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的倍率关系。很多情况下这两种尺寸可以用1.5倍直接等比适配。
　　3、这个奇葩的数值是苹果官方都不愿意公开宣传的一个分辨率，不便于记忆和计算栅格。640x1136虽然是广泛应用的一个分辨率，但是大屏时代依然以小尺寸为设计基准显然不合时宜，设计师会停留在小屏的视角做设计。
　　所以，iPhone6的750x1334是最适合基准尺寸。
　　只交付一套设计稿，默认用什么规则来适配?
　　前文提到适配策略是先选择iPhone 6作为基准设计尺寸，然后通过一套适配规则自动适配到另外两种尺寸。这套适配规则总结起来就一句话：文字流式，控件弹性，图片等比缩放。
　　控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变;水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。
　　按照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容，需要设计出特殊适配效果。比如App store首页焦点图，从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。
　　来源： 知乎(pigtwo)
本站关键词
科e互联版权所有
京ICP备号-1建站教程子分类