永利402com官方网站依傍Bootstrap响应式网格系统

永利402com官方网站 4
永利402com官方网站

四.有关IE包容性表明

支付宝

永利402com官方网站 1

Bootstrap响应式(适应于不相同的终点设备).Bootstrap栅格系统是使用百分比把视口等分为13个,然后使用媒体询问,设置float属性使之并列突显

 

 <meta name=”viewport”
content=”width=device-width; initial-scale=1.0″> 

三.Bootstrap栅格系统百分比总计 12/拾0 =
栅格等分/x(百分比)

 源代码如下

微信

永利402com官方网站 2

永利402com官方网站 3

3.落到实处当浏览器尺寸小于等于7陆七px像素垂直排列展现,当浏览器尺寸当先7⑥柒px像素排成1行展现

以下是Bootstrap常用媒体询问尺寸

 让IE(包含IE陆)浏览器援助HTML伍规范<语义化标签等>
须要使用html5.js

永利402com官方网站,至于作者:专注于WEB前端开辟

  
 good tutorials

出处:

永利402com官方网站 4

例如width,height,color.CSS3中的Media
queries让内容的显示能够只针对一定范围的输出设备而不必去改换内容本人.

 全部主流浏览器都帮助这一个装置,包涵IE九。对于这些老式浏览器(重借使IE陆、柒、8),供给使用css3-mediaqueries.js .(也许利用respond.js也能够让IE陆-IE8协助CSS3 media Query)

传播媒介询问包蕴二个可选的媒体类型和零或多少个表明式来界定使用媒体本性的样式表范围

 

viewport是网页暗中同意的肥瘦和惊人,上边那行代码的乐趣是,网页宽度暗中认可等于显示屏宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页起先大小占荧屏面积的百分百.

 

* { box-sizing: border-box; } 
[class*="col-"] { float: left; padding: 15px; border: 1px solid red; } 
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media (max-width: 767px) {}   /*小于等于767像素*/
@media (min-width: 768px) and (max-width: 991px) {} /*768~991px像素之间(包含最小像素768与最大像素991)*/
@media (min-width: 992px) and (max-width: 1199px) {} /*992px~1199px像素之间(包含最小像素992与最大像素1199)*/
@media (min-width: 1200px) {} /*大于等于1200px*/

【参考资料】

 

本文版权归笔者全数,转发请标明原来的书文链接。

壹.媒体查询

 

假定以为自家的篇章对您有用,请随便打赏。您的援助将鼓励作者连连的迭代!

 

作者:Avenstar

常用媒体询问分辨率分界点截图

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <!--IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算  Google Chrome 内嵌浏览器框架GCF-->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!--viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),
  原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%-->
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <!--[if IE]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
       <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
  < ![endif]-->
  <title>媒体查询</title>
  <style>
         html, body, div, p, header,hgroup, h1, h2,article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
          margin: 0;
          padding: 0;
         }
         /*HTML5 新增语义化标签*/
         article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
          display: block;
         }
         html {
          font-size: 100%;
         }
      body {
       width: 100%;
    height:100%;
    font-size: 1rem;
    background-color:#fff;
    color:#333;
    font-family:"华文细黑 Regular", "Helvetica", "Arial", "Verdana", "sans-serif";
    -webkit-font-smoothing: antialiased;
      }
      *, *:before, *:after {
       box-sizing: border-box;
       -webkit-box-sizing: border-box;
      }
      header {
       padding-left: 0.9375em;
       padding-right: 0.9375em;
       background-color: #000000;
       line-height: 2.5em;
      }
      h2 {
       font-size: 1.125em;  /*1 ÷ 16 × 18 = 1.125em值*/
       color: #FFF;
      }
      .container {
       padding-top:  0.9375em;
       padding-bottom:  0.9375em;
       padding-left: 0.9375em;
       padding-right: 0.9375em;
      }
      .container p {
       line-height: 1.5em;
      }
      .row-box{
       display: block;
      }
   /*---------------------------------------—--------
        栅格系统
       *----------------------------------------------- */
      .col-sm-4  {
       position: relative;
       min-height: 1px;
       width: 100%;
       padding-right: 15px;
       padding-left: 15px;
       color: #FFFFFF;
       font-weight: 600;
      }
      [class*="col-sm-"] {
       padding-top:15px;
       padding-bottom: 15px;
      } 
      /*小于等于767像素*/
      @media (max-width: 767px) {
       .col-sm-4 {
        width: auto;
       }
      }  
      /*768~991px像素之间(包含最小像素768与最大像素991)*/ 
   @media (min-width: 768px) and (max-width: 991px) {
    .col-sm-4 {
        width: 33.3%;
        float: left;
       }
   } 
   /*992px~1199px像素之间(包含最小像素992与最大像素1199)*/
   @media (min-width: 992px) and (max-width: 1199px) {
    .col-sm-4 {
        width: 33.3%;
        float: left;
       }
   } 
   /*大于等于1200px*/
   @media (min-width: 1200px) {
    .col-sm-4 {
        width: 33.3%;
        float: left;
       }
   }
   /*----------------------------------------
    底部导航
   *----------------------------------------*/
   footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding-left: 0.9375em;
       padding-right: 0.9375em;
       line-height: 2.5em;
    background-color: #000000;
    color: #FFFFFF;
   }
     </style>
 </head>
 <body>
  <header>
   <hgroup>
    <h2>头部导航</h2>
   </hgroup>
  </header>
  <div class="container">
   <p>所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js</p>
   <p> HTML5-JS文件-让IE(包括IE6)浏览器支持HTML5标准 需要使用html5.js</p>让支持HTML5元素
   <div class="row-box">
    <div class="col-sm-4" style="background-color: #ef0655;">AAA</div>
    <div class="col-sm-4" style="background-color: #00AABB;">BBB</div>
    <div class="col-sm-4" style="background-color: #285E8E;">CCC</div>
   </div>
  </div>
  <footer><h2>底部导航版权 @By Avenstar</h2></footer>
 </body>
</html>

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图