响应式网站制作技术点精要讲解

响应式网站深圳方维网络科技有限公司版权所有什么是响应式网站？伊桑·马科特在2010年首次提出了响应式网页设计(RWD,ResponsiveWebDesign)的概念。简而言之是指网页能够根据屏幕宽度自动适应，以达到适配各种屏幕。参考案例响应式网站遇到的问题1、代码过于臃肿，导致网站打开速度慢，尤其是手机网站。2、图片按需加载，不能移动端调取一个大图片。3、兼容性，IE8以下不考虑兼容。响应式网站适合什么情况下进行，可参考文章解决方法思路1、同一段代码同一段CSS搞定（需要设计的结构比较好）2、同一段代码不同媒体查询实现3、实在没有办法才采用：写几段代码分别适配不同屏幕兼容尺寸兼容手机横竖屏、平板横竖屏、PC各尺寸分辨率如下终端名称竖屏横屏Iphone5/iphone5s/iphonese320px568pxIphone6/iphone6s/iphone7375px667pxIphone6plus/iphone6splus/iphone7plus414px736pxAndroidPhone320px768pxipad768px1024px笔记本-1366pxPC-1400px大致分为以下尺寸三等分小屏幕小于768px中等屏幕大于等于768px小于1024px大屏幕大于等于1024px四等分bootstrap默认四等分具体可根据实际情况修改媒体查询@media(max-width:767px){//小屏幕专用}@media(min-width:768px)and(max-width:1023px){//中等屏幕专用}@media(min-width:768px){//中等屏幕和大屏幕使用}@media(min-width:1024px){//大屏幕专用}META写法采用HTML5头!DOCTYPEhtml设置宽度为设备宽度metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=noIE浏览器用最高版本解析metahttp-equiv=X-UA-Compatiblecontent=IE=edge//针对IE9以下浏览器支持HTML5标签和媒体查询!--[ifltIE9]scripttype=text/javascriptsrc=__PUBLIC__/home/js/html5.js/scriptscripttype=text/javascriptsrc=__PUBLIC__/home/js/respond.min.js/script![endif]--基础CSS类box-sizing设置为border-box响应式网站大部分布局都需要使用百分比宽度，所以必须把边框和padding的大小计算进宽度里，否则无法实现。适合手机站和响应式网站。CSS代码*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;}举例：容器做一个公用的容器控制宽度。如bootstrap容器.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。媒体查询里分别设置不同屏幕下各自的宽度，进行复用控制字体大小控制建议大于等于768px的字体用px控制。设计稿设计比较好的全部用px控制可以，个别的用rem或者另外设置$(function(){change_fontsize();}$(window).resize(function(){change_fontsize();});functionchange_fontsize(){varwidth=$('body').width();if(width640){varfont_size=width/640*20;$('html').css('font-size',font_size+'px');}}网格1、采用bootstrap栅格系统2、使用nth-child和媒体查询实现详细代码：:nth-child(Xn+Y)响应式图片简单粗暴，适合中小图片如Bootstrap3代码.img-responsive{display:block;max-width:100%;height:auto;}可以达到效果，但是不能优化效率和减少手机端流量。CSS背景和媒体查询为不同屏幕设置不同的背景图片采用Picturefill代码片段如下：picture!--[ifIE9]videostyle=display:none;![endif]--sourcemedia=(max-width:640px)srcset=__ROOT__{$ban.picture640}/sourcemedia=(max-width:1200px)srcset=__ROOT__{$ban.picture1200}/!--[ifIE9]/video![endif]--imgalt=''title='{$ban.title}'src='__ROOT__{$ban.picture}'//picture相关说明：导航栏实现JS如dropdown.jsCSS制作2个HTML代码段分别展示其他细节通过观察很多响应式网站顶部高度是固定的Bootstrap更多介绍Bootstrap下载源代码，尤其是CSS，详细查看其实现原理。最后一招看看别人是怎么做的，多研究，寻找最好解决办法。