响应式web设计:html5和css3实战,html5响应式布局教程

　　一，自适应和响应式的区别

　　自适应是一组模板，适应所有终端，但是在每个设备上看到的布局都是一样的，俗称宽度自适应。

　　一组响应模板适用于所有终端，但每个设备看到的布局可能不同。

　　虽然响应式/自适应web设计会因为兼容各种设备而带来工作量大、代码繁琐、加载时间长的缺点，但它们跨平台、跨终端，可以“一次设计，普遍适用”。它们可以根据屏幕分辨率自适应，自动缩放图片，自动调整布局。它们不仅是技术的实现，也是一种全新的设计思维方式。

　　很多网站的解决方案是针对不同的设备提供不同的网页，比如移动版或者iPhone/iPad版。这样保证了效果，但是比较麻烦，要同时维护好几个版本。此外，如果一个网站有多个门户，这将大大增加架构设计的复杂性。

　　适应仍然暴露出一个问题。如果屏幕太小，即使网页可以根据屏幕大小进行适配，在小屏幕上观看也会感觉内容过于拥挤。响应式就是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕的宽度，并相应地调整网页设计，布局和显示的内容可能会发生变化。

　　适应体验http://m.ctrip.com/html5/响应体验http://segmentfault.com/

　　Css秘密花园http://www.csszengarden.com/

　　http://caibaojian.com/demo/ued/

　　二，响应式基础知识

　　1，设置meta标签

　　 meta= viewport content= width=device-width，initial-scale=1.0，maximum-scale=1.0，user-scalable=no 这段代码的几个参数说明：

　　width=device-width:宽度等于当前设备的宽度。

　　初始缩放：初始缩放比例(默认设置为1.0)

　　最小比例：允许用户缩放的最小比例(默认设置为1.0)。

　　最大比例：允许用户缩放的最大比例(默认设置为1.0)。

　　用户可伸缩性：用户是否可以手动放大和缩小(默认设置是no，因为我们不希望用户放大和缩小页面)

　　2.媒体查询css3的媒体查询是实现响应性设计的关键因素。您可以使用媒体查询的功能，使页面根据设备的宽度使用不同的css块。

　　当屏幕宽度小于或等于980时，以下css规则有效：

　　@media(方向：纵向)和(最大宽度：460px) {。视频。内盒。news a.more { display:无；} .视频。内盒。news span { display:无；} .视频。内盒。新闻{宽度：100%；} .视频。内盒。新闻ul {宽度：100%；文本对齐：居中；}}方向：纵向横向

　　肖像：

　　指定输出设备中页面可见区域的高度大于或等于宽度。

　　风景：

　　除了人像价值，就是风景。

　　选择加载CSS，如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

　　link rel= style sheet type= text/CSS media= screen and(最小宽度：400px)和(最大设备宽度：600 px) href= small screen . CSS /3，百分比布局

　　三，响应式页面设计，字体，图片的处理

　　1、html5/css3响应式页面的设计过程

　　第一步：确定兼容设备类型和屏幕尺寸：包括移动设备(手机、平板)和PC。对于移动设备，在设计和实现时注意增加手势的功能。

　　屏幕尺寸：包括各种手机屏幕尺寸(包括横竖)，各种平板尺寸(包括横竖)，普通电脑屏幕，宽屏。

　　第二步：根据确定的尺寸制作不同的线框原型。需要考虑清楚页面的布局如何变化，内容大小如何缩放，功能和内容如何删除，甚至如何针对特殊环境进行特殊设计。这个过程需要设计师和前端开发者的密切沟通。

　　第三步：视觉设计，将图片导入到相应的设备中进行一些简单的测试，可以帮助我们尽快的发现可访问性和可读性方面的问题。

　　响应式设计与传统的web开发相比，页面布局和内容大小都发生了变化，因此最终的输出更有可能与设计稿有所不同，这就需要前端开发人员和设计师进行更多的沟通。

　　2.响应字体

　　CSS中几种不同单位的比较

　　Px: Pixel(像素)。相对长度单位，其大小由屏幕分辨率决定。(有媒体询问)

　　Em:相对长度单位。等效于当前对象中文本的字体大小。如果当前行内文本的字体大小没有设置，它是相对于浏览器的默认字体大小。em的值不是固定的；它继承父元素的字体大小。所有未调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=0.625em.为了简化font-size的转换，需要在css中的body selector中声明Font-size=62.5%，这样就使得em值为16px*62.5%=10px，这样12px=1.2em，10px=1em，也就是说，你只需要将你原来的px值除以10，然后用em作为单位替换即可。

　　REM:CSS3的一个新的相对单位。em和EM的主要区别在于，当使用rem为元素设置字体大小时，它仍然是相对大小，但它只是HTML根元素。这个单位可以说是结合了相对大小和绝对大小的优点。它不仅可以通过修改根元素来按比例调整所有字体大小，还可以避免逐层复合字体大小的连锁反应。目前除了IE8及更早版本，所有浏览器都已经支持rem。对于不支持的浏览器，解决方法很简单，就是写一个绝对单位语句。这些浏览器会忽略rem设置的字体大小。

　　%:此外，我们还可以使用percentage来指定大小，它表示当前字体大小相对于浏览器默认字体大小的倍数。这个单元通常用于页面响应设计。

　　html { font-size:62.5%；/* 1016=62.5% */} body { font-size:12px；字体大小：1.2雷姆；/* 1210=1.2 */} p { font-size:14px；字体大小：1.4红色；}需要注意的是，为了兼容不支持rem的浏览器，我们需要在rem前面写相应的px值，这样不支持的浏览器才能优雅降级。其实不用太担心是默认字号：100%还是默认字号：62.5%。如果引入CSS预处理工具，自然可以使用默认值。如果因为其他原因使用font-size:62.5%，也没什么问题。您可以完全重置正文中所需的默认字体大小。

　　3.响应图像和视频处理

　　http://Alistair . com/d/responsive-we B- design/ex/ex-site-flexible . html #

　　1.背景图像-媒体查询

　　2.液体画-弹性画

　　img，object { max-width:100%；} https://www . filament group . com/examples/responsive-images/3 . html 5 picture元素

　　HTML5的图片元素可以设置多张图片。

　　浏览器支持

　　图片来源srcset= images/img _ small flower . jpg media=(max-width:400 px)图片来源srcset= images/img _ Flowers . jpg img src= images/img _ Flowers . jpg alt= Flowers style= width:auto；/picture使用picturefill.js来处理图片标签兼容性。

　　虽然picture的兼容性不是很好，但是不用等就可以开始使用了。下面这个类库picturefill.js可以很好的解决图片的浏览器兼容问题。使用非常简单，可以导入。

　　script= 3358 cdn . GB tags . com/picturefill/2 . 0 . 0/picturefill . min . js /script 4。使用noscript标记创建响应图片。

　　Js动态加载大小图片。

　　span class= img-placeholder /span no script data-mobile src= small。jpg 数据-完整src=大。 jpg data-alt text= your alt text class= responsive img src= big。jpg /no script script type= text/JavaScript var responsiveImageTag={ replaceinialimages:function(respons){ var platform= desktop ；var resImage= .响应；定义变量响应图像=$(resImage)；var i，noOfresponsiveImages=响应式图像。长度；//当前显示器设备宽度测试if(screen.width=767){ //767px，比苹果平板电脑小的都认为是移动平台=移动；}//设置图像上的初始源元素(I=0；我没有响应图像；I=I 1){ var noScriptElem=$(responsive images[I])；var img=window。文档。createelement(“img”)；img。alt=noscriptelem。attr( data-alt text )；if(platform=== mobile ){ img。src=noscriptelem。attr(数据移动src )；} else { img。src=noscriptelem。attr(数据-完整src )；} img . class name=" responsive $("。img-placeholder’).等式（一)。html(" ").追加(img)；noscriptelem。hide()；} }};响应图像标签。replaceinialimages( responsivize )；$(窗口)。resize(function(){ responsiveimagetag。replaceinialimages( responsivize )；});/script四，响应式框架

　　定制化：如果你的网站有大量多样化的设计，那么当你如果还想使用引导程序就需要将框架作为底层修改：需要复写大量样式，CSS层次编的混乱，难以维护。

　　在一些场合，引导程序是非常有用的。比如你想快速搭建一个比较漂亮的个人站企业站博客后台管理界面等对页面定制化需求不高的项目往往更适合后台项目多数后台系统浏览器兼容好让步样式也好让步不太会细抠细节。或者你可能在构建网站前端、考虑浏览器兼容性和数不胜数的设备尺寸上缺乏经验，引导程序会帮你解决很大一部分麻烦的问题

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。