bootstrap响应式网页

时间 2019-11-24

原文原文链接

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

bootstrap响应式网页的特色：

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

viewport

移动端格式：
代码：html

<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

栅格布局

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-4bash

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

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

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

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单位

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，就解决兼容性

字体图标

特色

体积小便于加载-
无需重复设计-
方便引用
bootstrap官方字体图标v3.bootcss.com/components/，记得引用

<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>
复制代码

国产阿里图标库www.iconfont.cn/
使用说明步骤