响应式布局学习笔记

一、什么是响应式布局(移动互联网的多终端显示)

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

        (2)给用户更好的视觉使用体验

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

         缺点:兼容性代码多,工作量大,加载速度容易受影响

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

二、响应式设计原则

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

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

三、实现响应式布局

       (一)方法

              1、CSS3-Media Query//根据不同纬度,用户窗口大小,给用户做不同UI界面展示

              2、原生javascript //在旧版浏览器不支持效果时,但不推荐使用,成本高

                3、第三方开源框架//可以很好的支持浏览器响应式布局,如bootstrap

       (二)CSS3-Media Query

              常见属性:

                     device-width,device-height                                   屏幕宽高(设备物理宽高)//像素

                     width,height                                                           渲染窗口宽高(浏览器可视区域)

                     orientation                                                                设备方向 //即手机横竖屏展示

                     resolution                                                                  设备分辨率

       (三)Bootstrap——高度组件化,不要尝试重新开发

                 核心:栅格化布局,需着重掌握

                 用法:



  
    
    
    
    Bootstrap

    
    

    
    
    
  
  
    

Hello World!

                          
                       initial-scale=1  //指的是默认不缩放,缩放比例1;

                      

               



    

你可能感兴趣的:(学习笔记)