bootstrap响应式网页

暮雪之寒
734 阅读4分钟

使用bootstrap来完成页面的响应式布局，以下内容有viewport、栅格布局、单位、字体图标

bootstrap响应式网页的特点：

  • 事业开阔多变、信息丰富
  • 排版新颖随意、设计师发挥空间较大
  • 适用于PC和手机端

viewport

移动端格式：
代码：

<meta type="viewport" content="width=device-width,initial-scale=1,maxmum-scale=1,minimum-scale=1,user-scalable=no ">
属性 属性详细 备注
width 宽 移动端宽度
height 高 移动端高度
initial-scale 初始缩放比例，也即是当页面第一次 load 的时候缩放比例 网页倍数1/2/...
maxmum-scale 最大倍数 1/2/...
minimum-scale 最小倍数 1/2/...
user-scaleble 用户是否可缩小/放大网页 yes/no
device-width 可代替width，自动获取

电脑像素：1024x768

前端面试问题： 手机端 如ipone等较为高清的移动端原始网页边线、边框、分隔线变粗了应如何解决

阿里淘宝里面手机端解决方案：判断是否是视网膜屏（Retina 显示屏），如果是就把scale动态换成0.5（缩小一倍），或者缩小相应的倍数。手机端开发-ip3以上 initial-scale:0.3/0.5；用js文件动态生成meta中initial-scale倍数问题

栅格布局

bootstrap中的响应式开发原理是栅格布局，将屏幕横向分为12等份。

字符代表 屏幕大小范围 划分
xs ＜768px 超小屏幕手机
sm 768-992px 小屏幕平板
md 992-1200px 正常屏幕笔记本正常电脑
lg >1200px 超大屏电脑，显示器

元素可以给根据不同屏幕的大小适应相应的大小，如col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4

col-lg-3：表示在大屏幕元素宽度大小为屏幕的3/12,占3份，即1/4,

col-md-4：表示在中等屏幕元素宽度大小为屏幕的1/3,

col-sm-6：表示在小屏幕元素宽度大小为屏幕的1/2,

col-xs-12：表示在极小屏幕元素宽度大小占满整个屏幕大小。

col-lg-offset-3：表示在大屏幕中元素的位置，距离屏幕左边为屏幕大小的1/4,

col-md-offset-4：表示在中等屏幕中元素的位置，距离屏幕左边为屏幕大小的1/3

1.不同屏幕显示不同效果（原理）
<head>
<style>
    .test{
        width:100px;
        height: 200px;
        background: red;
    }
    @media screen and (max-width:900px;) and (min-width:500px){
        width:100%;
        height: 200px; 
        background: blue;
    }
</style>
</head>
<body>
    <div class="test"></div>
</body>

2.栅格
<head>
<style>
    .test{
        height: 200px; 
        background: red;
    }
</style>
</head>
<body>
    <div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-ossset-4"></div>
    <!--在超大屏幕中占1/4，普通占1/3 平板1/2 手机1/1  超大屏幕中偏移1/4 普通偏移1/3-->
</body>

单位

px

  • 相对于显示屏幕分辨率的长度单位，但其大小无法跟随屏幕放大缩小，不过所有的浏览器都支持px单位

em

  • 1em=16px
  • 汇继承父级元素的字体大小
  • IE浏览器不支持em

rem

  • 与em类似
  • 会继承根元素的字体大小
  • html{ font-size:62.5%; }
  • 即HTML的字体大小为62.5%*16px=10px，所以，10px=1em（我也不知道怎么就得出这个了）。所以如果要设置字体大小为16px，只需要设置字体大小为1.6rem。
  • 如果有兼容性问题,设置字体大小的px写在前面，rem写在后面。用rem覆盖px，就解决兼容性

字体图标

特点

<head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
    .glyphicon-asterisk{
        color: #02a6e3;
        font-size: 100px;
    }
    </style>
</head>

<body>
    <span class="glyphicon glyphicon-asterisk"></span>
</body>
avatar
文章
阅读
粉丝