问题:同一个网页,在web端显示良好,在移动端访问可读性非常差。
目的:One page for all devices。网页在不同的设备打开,在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定的版本。
也就是我们常说的如何构建“响应式网页设计”(responsive web design)。
解决方案涉及到的知识点:
- viewport
- media query
- Javascript window.matchMedia
- 响应式图片
- 栅格布局
- 顶部导航
- 测试工具
iOS和Android自带的浏览器都是基于webkit内核,所以我们可以使用viewport属性和media query技术实现网站的响应性。
viewport
在<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的实现 http://v3.bootcss.com/css/#grid-media-queries ,
以下是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. } else { // 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. } else { // 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="http://scottjehl.github.io/picturefill/external/matchmedia.js"></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: auto;
属性,可以让图片按比例缩放,不超过其父元素的尺寸。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
Demo: http://scottjehl.github.io/picturefill/
简洁:基于matchmedia库实现图片适配。在不支持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>
</span>
这种方法会根据屏幕大小下载特定的图片,不会将所有定义的图片都下载,所以不用担心带宽的问题。
改变屏幕的宽度,会下载适配的图片,在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。
5、对比 picturefill 和 srcset-polyfill
picturefill 文件更小(但是多了一个依赖库);WEB端页面下载后改变窗口大小,会下载适配的图片。但是,由于是从span标签通过js转为img标签,所以web端图片加载比srcset慢慢慢慢。。。
srcset-polyfill语法简洁;页面加载后,图片不会重新下载,适配性没有picturefill好。
这个Demo可以看到两种效果:
页面加载时的资源请求状况
将窗口缩小又放大后,picturefill会不断请求适配图片,包括已经下载过的wedding-medium.jpg
6、Grunt的responsive images插件(暂时没用,先mark)
[Demo]http://andismith.github.io/grunt-responsive-images/
栅格系统
Bootstrap3的实现 http://v3.bootcss.com/css/#grid-options
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>
</button>
<a class="navbar-brand" href="#">Bootstrap website</a>
</div>
<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>
</ul>
</li>
</ul>
</div> <!-- /.nav-collapse -->
</div> <!-- /.container -->
</div> <!-- /.navbar -->
同时boot可以定制折叠模式与水平模式的阈值
根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。
全屏问题:
bootstrap3的 .container做了适配定宽,可以添加一个id=“container”设置 #container { width: 100%; }
.row设置了margin-left: -15px; margin-right:-15px;所以某些状况下会出现横向滚动条,清除这条样式就可以了 .row { margin-left:0; margin-right:0; }
定制折叠模式与水平模式的阈值
根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。
表单
根据列的表单布局,使用更整洁的网格类
<div class="row">
<div class="col-span-4">
<label></label>
</div>
<div class="col-span-8">
<input type="text"/>
</div>
</div>
Canvas绘制
一个Demo
测试工具
在线测试你的网页 http://www.isresponsive.com/
这个测试工具也可以帮助你判断某些网站到底是用前端技术,还是服务端实现手机访问。
Adobe Edge Inspect CC
同步开发测试工具,付费版可协同多设备,实时同步浏览器、无需刷新。
模板
http://punyweblab.com/projects/bolt/
参考
http://alistapart.com/article/responsive-web-design
https://speakerdeck.com/addyosmani/mobile-workflow
http://mienflying.bitbucket.org/responsive/#intro
http://v3.bootcss.com/css/#grid-media-queries
图片
http://css-tricks.com/responsive-images-hard/
https://github.com/scottjehl/picturefill
https://github.com/paulirish/matchMedia.js/
https://github.com/andismith/grunt-responsive-images
https://github.com/borismus/srcset-polyfill
tutorials
http://www.script-tutorials.com/responsive-website-using-bootstrap/
http://tmp.devcharm.com/pages/responsive-web-design-introduction
plus
https://plus.google.com/s/%23Responsive
Responsive Design Weekly