#移动端响应布局课总结

移动端响应布局总结

简介

响应式网页设计是一个网站能够兼容多个终端，而不需要为每个终端都单独去设计一次界面(页面自动判断终端决定自己的现实形式)

注意

响应式布局并不是同样类容的比例缩小，而是不同设备上有不同的现实方式

响应式布局的两个主要原则：

1：重要类容优先
2：提供清晰友好的手指操作链接—小设备上如果链接很小的话，很容易让人奔溃
3：体验的一致性
4：用户使用习惯—-例如我们习惯性的把一些菜单放到用户右手边上，习惯按键

一般显示的页面尺寸例：

普通电脑 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

例：

我们现在使用的是bootstrap框架

    <meta name="viewport" content="width=device-width, initial-scale=1">   
    注意：想要实现响应布局，在不同的页面显示兼容必须加的一句   

案例1：

测试div块在大设备和小设备上显示大小的不同

    <div class="container">
       <div class="row">
       <div class="col-xs-12 col-sm-3 col-lg-12 test" >
       <h1>LESS</h1>
      <h1>SASS</h1>
     </div>
    </div>
    </div>

     .test{
       background-color: red;
      }

测试2：

测试在某些屏幕上不显示某些元素

      <div class="col-md-3 visible-lg test"></div>   
    注意这里，在大屏幕不占 中等设备上边站3列宽度 hidden-xs   

#字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。px是绝对单位，不支持IE的缩放，em是相对单位。

字体案例

单位值 px

 #show{
            background-color: red;
            font-size: 7em;
        }

<div id="show" >来啊</div>