大佬教程收集整理的这篇文章主要介绍了html5/css3响应式布局,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
html5图片自适应http://www.gbtags.com
html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体@L_516_2@media query兼容问题
一个普通的自适应显示的三栏网页,当你用不同的终端来查看这个页面的时候,他会根据几种终端来显示不同的样式,在电脑上是三列,在pad上应该也是 三列,在大屏手机上是三行,在屏幕小于320的手机上只显示主要内容,隐藏掉了次要元素。(这里关于响应式布局还有个比较好的消息,就是拖动浏览器也可以 触发判断条件,测试的时候你不需要去找一堆手机,只要把自己的浏览器窗口缩小到一定尺寸就可以了。)
这个语句,就是响应式布局的基础应用了。在判断终端分辨率大小之后,赋予不同的样式进去,就像我们的例子里
一般大于960的显示器都可以用默认样式而不必在媒体查询里判断了。有一种情况除外,就是高像素比的终端,比如 iphone4以上的reTina屏,一个iphone5的小小的屏幕(iphone的屏幕是真小啊),他的分辨率竟然达到了1136*640,几乎等于 一个笔记本的分辨率。你在这样小的物理显示界面打开一个网页,他用1136的分辨率来显示,结果就是所有元素小的可怜。
在面对这种分辨率精细的终端,我们有另外一个条件查询语句 device-pixel-ratio。
比如例子里的
就是判断终端的像素比是2的话,所渲染的样式。iphone4以上像素比是2,高分辨率Andriod设备像素比是1.5,例子里只有像素比为2的查询,1.5的或者其他比例方法一样,前面用的是几种浏览器的私有属性,最后一种是通用属性,
为了一些版本的兼容性,不得已写的长了。
这里也暴露了响应式一个很大的缺点:需要多做若干背景图
对于media query的兼容性,我想不是很重要,因为很少有终端自带IE9以下的浏览器。基本都是高级浏览器。如果特殊需要,可以下载一个兼容的JS文件
以条件注释的方式加在文件里。
=========================================
第一步:确定需要兼容的设备类型、屏幕尺寸
通过用户研究,了解用户使用的设备分布情况,确定需要兼容的设备类型、屏幕尺寸。
设备类型:包括移动设备(手机、平板)和pc。对于移动设备,设计和实现的时候注意增加手势的功能。
屏幕尺寸:包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。
需要考虑的问题:
二步:制作线框原型
针对确定下来的几个尺寸分别制作不同的线框原型,需要考虑清楚不同尺寸下,页面的布局如何变化,内容尺寸如何缩放,功能、内容的删减,甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和前端开发人员保持密切的沟通。
@H_197_139@
第三步:测试线框原型
将图片导入到相应的设备进行一些简单的测试,可帮助我们尽早发现可访问性、可读性等方面存在的问题。
注意,移动设备的屏幕像素密度与传统电脑屏幕不一样,在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。
与传统的web开发相比,响应式设计的页面由于页面布局、内容尺寸发生了变化,所以最终的产出更有可能与设计稿出入较大,需要前端开发人员和设计师多沟通。
响应式布局简明示例,响应式布局最好同时也是自适应布局,然后再配合css3媒体查询,来达到完美的响应式布局。
css3的媒体查询ie9一下是不支持的,这太遗憾了,不过幸运的是有大神已经为前端屌丝们写好了用于IE9以下的媒体查询脚本文件,引用方式如下:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
< ![endif]-->
css3媒体查询语法:
/*@media screen and (min-width:1440pX) and (max-width:1600pX){}*/
@media screen and (min-width:1440pX){ /*大于等于1440*/
/*这里是特定的样式表*/
body,input,textarea,SELEct,small,a{font-size:14px;}
}
@media screen and (max-width:1024pX){
/*懒人建站*/
}
@media screen and (max-width:768pX){
/*不大于768px的设备尺寸中 响应式布局的特定样式*/
}
@media screen and (max-width:360pX){
}
@media screen and (max-width:320pX){
}
在移动端、手机上打开这个网页的话,如果做响应式布局,还要在head区域加上如下代码:
<Meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
< Meta name="apple-mobile-web-app-capable" content="yes" />
< Meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
< Meta name="format-detection" content="telephone=yes"/>
< Meta name="msapplication-tap-highlight" content="no" />
如果不是很明白,就直接粘贴过去使用就可以了。
width=device-width,user-scalable=no 大概意思是,网页宽度采用设备宽度,缩放比例为1,不允许用户缩放操作,
以上的头部声明是手机端页面的标配。
- img{
- max-width:@H_403_248@100%;
- height: @H_944_260@auto;
- }
HTML5 picture标签
使用picture标签非常类似使用audio或者video标签,能做到的不是简单的自适应容器,而是可以根据设备屏幕尺寸或者带宽来修改调用的图片地址,如下:
<picture>
- <source srcset="http://www.gbtags.com/gb/laitu/800x400" @H_99_215@media="(max-width: 800pX)" />
- <source srcset="http://www.gbtags.com/gb/laitu/1600x800" />
- <img src="http://www.gbtags.com/gb/laitu/1600x800" alt="">
- </picture>
以上代码,设置当设备视图宽度低于800px时,使用800x400图片,高于800px,使用大尺寸图片1600x800
更复杂的例子:
- <picture>
- <source srcset="smaller_landscape.jpg" @H_99_215@media="(max-width: 40em) and (orientation: landscapE)">
- <source srcset="smaller_porTrait.jpg" @H_99_215@media="(max-width: 40em) and (orientation: porTrait)">
- <source srcset="default_landscape.jpg" @H_99_215@media="(min-width: 40em) and (orientation: landscapE)">
- <source srcset="default_porTrait.jpg" @H_99_215@media="(min-width: 40em) and (orientation: porTrait)">
- <img srcset="default_landscape.jpg" alt="My default image">
- </picture>
以上是大佬教程为你收集整理的html5/css3响应式布局全部内容,希望文章能够帮你解决html5/css3响应式布局所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。