bootstrap使用rem

2017-05-26 14:34:00 weixin_30706691 阅读数 73
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

关于ie8兼容的问题 在bootstrap官方文档已经给了相应的解决方案

头部加入

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

 

  后面还需要加入

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->

  这段意思是在ie9以及ie9以下可以使用  别的ie写法(做个标记)

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

当然有人会说:我加入了但是还是不兼容啊 

那么你一定没有仔细看官方文档 

      有没有看到file://协议  意思就是放在服务器来生效奥!

      如果有人用了rem 想要兼容ie8  请用 rem.js 

      

转载于:https://www.cnblogs.com/mtxn/p/6908356.html

2018-03-06 20:09:11 xinye5461 阅读数 41368
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

    影响元素之间的间距是可以通过stylemarginpadding属性来实现,但这两个属性本意并不相同;margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距;padding影响的元素本身与其内部子元素之间的距离,简称为内填充。

bootstrap4提供了简写的class名,名称分别以m-开头和p-开头的类。

一、影响距离大小的值有

0,1,2,3,4,5,auto

(1)margin值有

class

等价的style

m-0

等价于{margin:0 !important}

m-1

等价于{margin:0.25rem !important}

m-2

等价于{margin:0.5rem !important}

m-3

等价于{margin:1rem !important}

m-4

等价于{margin:1.5rem !important}

m-5

等价于{margin:3rem !important}

m-auto

等价于{margin:auto !important}

(2)padding值有

 

class

等价的style

p-0

等价于{padding:0 !important}

p-1

等价于{padding:0.25rem !important}

p-2

等价于{padding:0.5rem !important}

p-3

等价于{padding:1rem !important}

p-4

等价于{padding:1.5rem !important}

p-5

等价于{padding:3rem !important}

p-auto

等价于{padding:auto !important}

二、调整某一侧的边距

有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom

(1)、margin例子,距离大小可以0-5与auto,这里只用期中一个值来说明含义

 

class名

等价的style

mt-2

{margin-top: 0.5rem !important}

mb-2

{margin-bottom: 0.5rem !important}

ml-2

{margin-left: 0.5rem !important}

mr-2

{margin-right: 0.5rem !important}

mx-2

{margin-right: 0.5rem !important;margin-left: 0.5rem !important}

my-2

{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}

(2)padding例子

class名

等价的style

pt-2

{padding-top: 0.5rem !important}

pb-2

{padding-bottom: 0.5rem !important}

pl-2

{padding-left: 0.5rem !important}

pr-2

{padding-right: 0.5rem !important}

px-2

{padding-right: 0.5rem !important;margin-left: 0.5rem !important}

py-2

{padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}

 

参考地址:   https://v4.bootcss.com/docs/4.0/utilities/spacing/

 


2016-07-22 11:12:40 fgdfgasd 阅读数 7147
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

最近搞移动端,真是被rem、em与px的换算要了老命了,看了不少文档,似乎弄明白了,这不今天用又蒙圈了。

好多文档上老是说用rem就给html设置font-size,用em就给body设置font-size

看了下bootstrap样式表,html {font-size:62.5%;}  body {font-size:14px;},其他样式略哈,就讲这两个主要的。

可惜大姐长了这么大眼睛,从昨天到今天一直把em看成了rem,导致越算越郁闷……好不说了,解释如下:

其实可以学习bootstrap的这种设置,因为在用到em和rem的时候互不影响,因为rem就是去参照你html的font-size,管你body设不设置,都与我没关系。

 

一、那么如果你确定要使用rem单位,就按以下三个步骤来计算:

1、确定基数:一般10px,自己记住就行,不用写进代码里

2、html {font-size:百分数;}    百分数=基数/16  

  基数10    百分数62.5%

  基数14    百分数87.5%

3、px换算rem   公式=想要的px值/基数

  也就是说,当你设置 html {font-size:62.5%;},你想给容器里的文字设置字号14px,换算成rem就是14px/10——1.4rem 这样子

  (如果自己想要测试的话,拿火狐Firebug测试,因为Chrome下字号低于12px失效哈,如果想设置小于12px的字号,Chrome也有解决方案,自己百度就好)

 

二、如果使用em单位的时候,计算机就会自己去找你body的设置,才不会管你html是如何设置的呢

比如我们伟大的bootstrap给 body {font-size:14px;} 这样设置后,如果我想要一个14px的外边距,我就用14px/14px——1em 这样啦。

以上是我自己总结的,如有错误,欢迎大家来指正哦~~


来源:http://www.cnblogs.com/YYvam1288/p/5123272.html

2018-05-10 10:26:11 u013821237 阅读数 1378
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

首先:用rem就是根据html的font-size,用em就是根据body的font-size

bootstrap样式表,html {font-size:62.5%;}  body {font-size:14px;}

一、那么如果你确定要使用rem单位,就按以下三个步骤来计算

1、确定基数:一般10px,自己记住就行,不用写进代码里

2、html {font-size:百分数;}    百分数=基数/16  

  基数10    百分数62.5%

  基数14    百分数87.5%

3、px换算rem   公式=想要的px值/基数

  也就是说,当你设置 html {font-size:62.5%;},你想给容器里的文字设置字号14px,换算成rem就是14px/10——1.4rem 

 

二、如果使用em单位的时候,计算机就会自己去找你body的设置,才不会管你html是如何设置的呢

比如我们伟大的bootstrap给 body {font-size:14px;} 这样设置后,如果我想要一个14px的外边距,我就用14px/14px——1em 这样啦。


参考:http://www.cnblogs.com/YYvam1288/p/5123272.html


2018-02-27 15:20:00 weixin_30932215 阅读数 177
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

移动端适配用:rem

自使用布局用:bootstrap

转载于:https://www.cnblogs.com/theone67/p/8479075.html