web前端响应式

一、响应式概述：

　　不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等，完整的响应式网站的实现需要考虑到这些问题：响应式布局、响应式html和css、响应式媒体、响应式javascript。

二、移动端布局控制：

使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。（用到PC端不影响）

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" /> <meta name="apple-mobile-web-app-status-bar-style" content="blank" />

三、普通元素的栅格布局：

　　.row{   width: 100%; } .row .col-1 {   width: 8.33333333333% }  .row .col-2 {   width: 16.6666666667% }  /* ...比较多，这里省略 */  .row .col-12 {   width: 100% }

四、不同设备元素容器布局：

通用栅格布局并不能解决我们全部的问题，例如某个页面板块列表，PC端一排展示4个，移动端一排展示2两个，使用栅格的话我们就需要重新定义.col-3和.col-6了。对于这种情况我们的处理方法也比较简单   对于移动端浏览器，通过简单的js逻辑判断，在html的body中加入mobile的内容，在body里面的相同元素使用不同的宽度布局的方式。这种方式订制化坚强，如果宽度布局用的不多，即可以使用这种不同宽度布局的方式来实现。这样就实现了一个普通div在移动端和PC端的不同布局。

.container{ width: 25%; } .mobile .container{ width: 50%; }

 

五、响应式html与css：

　　1、CSS文件，分开两种，一个是移动端，另一个是PC端

　　2、动态使用js渲染不同内容

六、响应式媒体

　　1、使用css背景图片 (依赖media query)

　　2、picture element (依赖浏览器新特性+midea query)

　　3、adaptive-images http://adaptive-images.com/

　　4、responsive-images.js(依赖js) https://github.com/kvendrik/responsive-images.js

<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg,  <768:small.jpg,<960:medium.jpg,>960:big.jpg' />

七、不同屏幕分辨率自适应方案

　　主要是解决高清屏(retina屏)的问题，由于高清屏与普通屏幕有所区别：

  由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案。(此处没去深究)JS检测是否高清屏：var retina = window.devicePixelRatio > 1;   例如一个边框的

@media only screen and (-webkit-min-device-pixel-ratio:2),        only screen and (min-device-pixel-ratio:2) { button {   border:none;   padding:0 16px;   background-size: 50% 50%; }