威尼斯人线上娱乐

响应式布局,模拟Bootstrap响应式网格系统

7 5月 , 2019  

Bootstrap响应式(适应于分化的终端设备).Bootstrap栅格系统是运用百分比把视口等分为10个,然后利用媒体询问,设置float属性使之并列显示

效仿Bootstrap响应式网格系统,bootstrap响应网格

Bootstrap响应式(适应于分歧的顶点设备).Bootstrap栅格系统是选拔百分比把视口等分为11个,然后利用媒体询问,设置float属性使之并列展现

一.媒体查询

媒体询问包括一个可选的媒体类型和零或八个表明式来界定使用媒体天性的样式表范围

比如width,height,color.CSS三中的Media
queries让内容的表现能够只针对特定范围的输出设备而不必去退换内容本人.

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

@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*/

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

威尼斯人线上娱乐 1

3.Bootstrap栅格系统百分比总括 12/十0 = 栅格等分/x(百分比)

* { 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%;}

三.兑现当浏览器尺寸小于等于767px像素垂直排列突显,当浏览器尺寸超越767px像素排成1行突显

威尼斯人线上娱乐 2

4.关于IE包容性表达

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

威尼斯人线上娱乐 ,viewport是网页私下认可的增加率和可观,上边那行代码的意味是,网页宽度暗许等于显示屏宽度(width=device-width),原始缩放比例(initial-scale=壹)为一.0,即网页开始大小占荧屏面积的百分之百.

 全部主流浏览器都辅助那些装置,包涵IE九。对于这么些老式浏览器(主借使IE六、7、八),必要利用css叁-mediaqueries.js .(或然采纳respond.js也足以让IE6-IE八协理CSS三media Query)

 让IE(包括IE陆)浏览器辅助HTML伍行业内部<语义化标签等> 要求利用html伍.js

 源代码如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <!--IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算  Google Chrome 内嵌浏览器框架GCF.简单描述用IE的壳,装上 Chrome 的芯-->
  <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 {
          margin: 0;
          padding: 0;
         }
      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;
      }
      .container {
       padding-top: 0;
       padding-bottom: 0;
       padding-left: 15px;
       padding-right: 15px;
      }
      .container p {
       line-height: 2rem;
      }
      .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;
       }
   }
     </style>
 </head>
 <body>
  <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">【参考资料】
  https://my.oschina.net/JeeChou/blog/198464
  https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
  https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
  http://qianduanblog.com/post/bootstrap3-learning-1-responsive-layout.html
  http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
  http://bootstrap.ninghao.net/scaffolding.html
  https://segmentfault.com/a/1190000007567739
  http://v3.bootcss.com/css/#grid
http://www.bkjia.com/HTML5/1180138.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1180138.htmlTechArticle模拟Bootstrap响应式网格系统,bootstrap响应网格 Bootstrap响应式 (适应于不同的终端设备). Bootstrap栅格系统 是利用百分比把视口等分为12个,...

响应式布局原理
第一步:Meta标签
响应式布局,模拟Bootstrap响应式网格系统。大多数运动浏览器将HTML页面放大为宽的视图(viewport)以契合显示器分辨率。你能够选用视图的meta标签来拓展重新设置。上边包车型客车视Logo签告诉浏览器,使用设备的增长幅度作为视图宽度并取缔上马的缩放。在标签里投入这几个meta标签。<meta
name=”viewport” content=”width=device-width, initial-scale=一
user-scalable=no”>

1.媒体查询

第二步:HTML结构
鉴于网页会依照显示屏宽度调节布局,所以无法采纳相对化宽度的布局,也不能够使用具备相对宽度的因素,越来越多都以比例操作,这一条十三分重要。
字体也不能够动用相对化大小(px),而不得不利用相对大小(em)。

传播媒介询问含有叁个可选的媒体类型和零或多个表明式来界定使用媒体性情的样式表范围

其三步:媒体询问-Media Queries
CSS叁 Media
Query-媒体查询是响应式设计的主干
。它依照规则告诉浏览器怎样为钦点视图宽度渲染页面。
传播媒介询问的意在为钦点的视图宽度钦点区别的CSS规则,来兑现区别的布局。媒体询问能够写在同三个要么独立的体裁表中。

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

IE八仍旧更早的浏览器并不帮忙Media
Query。你能够运用media-queries.js或然respond.js来为IE增添Media
Query帮助。

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

HTML中的条件注释:
<!--[if lt IE 9]>
 <script src="https://cdn.staticfile.org/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>
 <![endif]-->
@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*/

一、响应式布局

落成分化显示器分辨率的终极上浏览网页的两样彰显格局,通过响应式设计能使网址在手提式有线电话机和平板计算机上有更加好的浏览阅读体验。

优点:
  面对不同分辨率设备灵活性强; 
  能够快捷解决多设备显示适应问题;
缺点:
  兼容各种设备工作量大,效率低下;
  代码累赘,会出现隐藏无用的元素,加载时间加长;
  其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果;
  一定程度上改变了网站原有的布局结构,会出现用户混淆的情况;

怎么完成响应式布局?
通过CSS3中的Media
Query(媒体询问),对应分歧荧屏大小,使用分歧的体裁操作;

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

二、viewport视口

  例如: 浏览器是相框,照片要放到相框中,照片比较大的时,照片就是进行缩放操作,但整体内容也缩放了;另外,照片要打印到相片纸中,再将其放入到相框中;
  PC端,要显示图片,是直接将图片渲染到浏览器窗口中;
  移动端,要显示图片,不是直接渲染到浏览器窗口中的,而是渲染在虚拟区域中即是viewpot;(移动端比PC端多了一层viewport,即可以通过设置viewport来控制整体页面的显示)
  • viewport的概念
    活动器械上的viewport就是器械的显示器上能用来显示大家的网页的区域。用来显示网页的那有个别区域,但viewport大概比浏览器的可视区域要大,也大概比浏览器的可视区域要小。默许情形下,移动道具上的viewport都以要高于浏览器可视区域的,私下认可的viewport设为980px或十贰四px(值由道具本身支配的)。浏览器可视区域的上升的幅度是比那些暗中同意的viewport的升幅要小,所以出现横向滚动条。

  • css中的一px并不等于设备的一px
    在css中我们一般px作为单位,在桌面浏览器中css的三个像素往往都以对应着计算机显示屏的三个概略像素。也许会促成大家的三个错觉,那便是css中的像素就是器具的概略像素。
    事实上意况却并非如此,css中的像素只是八个抽象的单位,在分化的设备或差异的条件中,css中的一px所表示的装置物理像素是区别的。
    iphone三,它的分辨率为320×480,在iphone叁上,1个css像素确实是相等1个显示器物理像素的。移动设备的荧屏像素密度进一步高,从iphone四开首,苹果公司便推出了所谓的Retina屏,分辨率升高了1倍,形成640×960,但显示屏尺寸却没变化,那就代表同样大小的荧屏上,像素却多了一倍,那时,贰个css像素是万分八个大意像素的。
    还有1个成分也会唤起css中px的变迁,那就是用户缩放。比方,当用户把页面放大学一年级倍,那么css中壹px所表示的大要像素也会扩展一倍;反之把页面缩短1倍,css中1px所表示的情理像素也会优惠扣一倍。

  • 动用meta标签对viewport实行支配
    最广泛的操作便是: <meta name=”viewport”
    content=”width=device-width, initial-scale=壹.0, maximum-scale=壹.0,
    user-scalable=0″>该meta标签的效益是让最近viewport的宽窄等于设备的宽窄,同时分歧意用户手动缩放。
    meta viewport
    标签首先是由苹果公司在其safari浏览器中引进的,目标正是解决移动道具的viewport难点。

  - width: 设置layout viewport  的宽度,为一个正整数,或字符串"width=device-width"(设备宽度)
  - initial-scale: 设置页面的初始缩放值,为一个数字,可以带小数
  - minimum-scale: 允许用户的最小缩放值,为一个数字,可以带小数
  - maximum-scale: 允许用户的最大缩放值,为一个数字,可以带小数
  - height: 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
  - user-scalable: 否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

<meta name=”viewport” content=”width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>

威尼斯人线上娱乐 3

叁、媒体询问

传播媒介询问可用于检验繁多事情:

  - viewport(视窗) 的宽度与高度
  - 设备的宽度与高度
  - 朝向 (智能手机横屏,竖屏)
  - 分辨率
  • 传播媒介询问语法

 // 表达式根据条件是否成立返回 true 或 false
@media not|only mediatype and (expressions) {
    CSS-Code;
}

  - not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备);
  - only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件;
  - all: 所有设备,这个应该经常看到
  • 多媒体类型

  - all: 用于所有多媒体类型设备
  - print: 用于打印机
  - screen: 用于电脑屏幕,平板,智能手机等
  - speech: 用于屏幕阅读器
  • 遵照显示器区别,引进不一样的样式表

  <!-- 屏幕在1000px以上的-->
  <link href="a.css" rel="stylesheet" media="screen and (min-width: 1000px)" />

  <!-- 屏幕是在600px~1000px-->
  <link href="b.css" rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 1000px)" />

  <!-- 屏幕是在小于400px的-->
  <link href="c.css" rel="stylesheet" media="screen and (max-width: 400px)" />
  • 因此媒体询问,增加差别体制

  // 屏幕最小宽度是1000px
  @media screen and (min-width: 1000px) {
    div {
      width: 1000px;
      height: 50px;
      margin: 10px auto;
      color: white;
    }
  }

  // 屏幕最小宽度是400px,最大是1000px
@media screen and (min-width: 400px) and (max-width: 1000px){
    div {
      width: 50%;
      height: 50px;
      margin: 10px auto;
      color: white;
    }
  }

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

* { 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%;}

三.兑现当浏览器尺寸小于等于76七px像素垂直排列展现,当浏览器尺寸超越7陆七px像素排成一行展现

威尼斯人线上娱乐 4

四.有关IE包容性表达

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

viewport是网页暗许的肥瘦和惊人,下面那行代码的乐趣是,网页宽度默许等于显示器宽度(width=device-width),原始缩放比例(initial-scale=一)为壹.0,即网页初叶大小占显示屏面积的百分百.

 全数主流浏览器都支持那几个装置,包含IE九。对于那多少个老式浏览器(首假设IE陆、七、八),供给动用css3-mediaqueries.js .(恐怕选取respond.js也足以让IE6-IE8帮衬CSS三 media Query)

 让IE(包蕴IE6)浏览器帮助HTML五号正楷字规<语义化标签等>
必要利用html5.js

 源代码如下

<!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>

作者:Avenstar

出处:

有关我:专注于WEB前端开垦

正文版权归小编全数,转发请标明原著链接。

假如感觉本身的稿子对您有用,请随便打赏。您的匡助将鼓励自身不住的迭代!

威尼斯人线上娱乐 5

支付宝

威尼斯人线上娱乐 6

微信

【参考资料】

 

 

 

  
 good tutorials

 

 

 

 

 


相关文章

发表评论

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

网站地图xml地图