,响应式网站,什么是响应式网站？,伊桑马科特在2010年首次提出了响应式网页设计(RWD,ResponsiveWebDesign)的概念。简而言之是指网页能够根据屏幕宽度自动适应，以达到适配各种屏幕。参考案例,响应式网站遇到的问题,1、代码过于臃肿，导致网站打开速度慢，尤其是手机网站。2、图片按需加载，不能移动端调取一个大图片。3、兼容性，IE8以下不考虑兼容。响应式网站适合什么情况下进行，可参考文章,解决方法思路,1、同一段代码同一段CSS搞定（需要设计的结构比较好）2、同一段代码不同媒体查询实现3、实在没有办法才采用：写几段代码分别适配不同屏幕,兼容尺寸,兼容手机横竖屏、平板横竖屏、PC各尺寸分辨率如下,大致分为以下尺寸,三等分小屏幕小于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头设置宽度为设备宽度IE浏览器用最高版本解析/针对IE9以下浏览器支持HTML5标签和媒体查询,基础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-responsivedisplay:block;max-width:100%;height:auto;可以达到效果，但是不能优化效率和减少手机端流量。CSS背景和媒体查询为不同屏幕设置不同的背景图片,采用Picturefill代码片段如下：相关说明：,导航栏实现,JS如dropdown.jsCSS制作2个HTML代码段分别展示,其他细节,通过观察很多响应式网站顶部高度是固定的,Bootstrap更多介绍,Bootstrap下载源代码，尤其是CSS，详细查看其实现原理。,最后一招,看看别人是怎么做的，多研究，寻找最好解决办法。,