前端随心记--------网页响应式布局

什么是响应式设计

让一个网站可兼容不同分辨率的设备

给用户更好的视觉使用体验

 

诞生背景

移动互联网的多终端显示

移动互联网推生了响应式布局的诞生

 

响应式设计优缺点

优点：解决了设备只见的差异化展示

缺点：兼容性代码多，工作量大，加载速度受影响

对原有网站布局会产生影响，用户判断未必精确

 

 

响应式设计的原则

移动优先：在设计的初期就要考虑的页面如何在多终端展示

渐进增强：充分发挥硬件设备的最大功能

 

 

如何实现响应式布局

CSS3-Media  Qjuery  （最简单的方式）

借助原生Javascript   （成本高，不推荐使用）

第三方开源框架    （可以很好的支持浏览器响应式布局的设计）

 

 

CSS-Media Query

常见的属性：

device-width,device-height        屏幕宽高

width,height         渲染窗口宽高

orientation        设备方向

resolution   设备分辨率

代码操作如下：

<style>
            @media  screen and (max-width:600px ) {
                body{background: blanchedalmond;}
            }
            @media  screen and (min-width: 100px) and (max-width: 640px) {
                body{background: red;}
            }
            @media  screen and (min-width:1001px ) {
                body{background: wheat;}    
            }    
        </style>

 

第三方插件：响应式布局之  Bootstrap