浏览器兼容模式:
告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Viewport设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
视口的作用:在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
视口的宽度可以通过meta标签设置
此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)
width:视口的宽度
initial-scale:初始化缩放
user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
maximum-scale:最大缩放
Bootstrap4 CDN:
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
条件注释:
相当于if判断语句,此意:仅支持IE10版本浏览器
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
详细参考:https://blog.csdn.net/haley_guo/article/details/80103858
默认字体:
body{
font-family: "Helvetica Neue",
Helvetica,
Microsoft Yahei,
Hiragino Sans GB,
WenQuanYi Micro Hei,
sans-serif;
}
container类:
用于定义一个固定宽度且居中的版心
<div class="topbar">
<div class="container">
...
</div>
</div>
栅格系统:
Bootstrap中定义了一套响应式的网格系统,
其使用方式就是将一个容器划分成12列,
然后通过col-xx-xx的类名控制每一列的占比
row类:
因为每一个列默认有一个15px的左右外边距
row类的一个作用就是通过左右-15px屏蔽掉这个边距
<div class="container">
<div class="row">
...
</div>
</div>
col-\-*类:
col-xs-[列数]:在超小屏幕下展示几份
col-sm-[列数]:在小屏幕下展示几份
col-md-[列数]:在中等屏幕下展示几份
col-lg-[列数]:在大屏幕下展示几份
xs : 超小屏幕 手机 (<768px)
sm : 小屏幕 平板 (≥768px)
md : 中等屏幕 桌面显示器 (≥992px)
lg : 大屏幕 大桌面显示器 (≥1200px)
<div class="row">
<div class="col-md-2 text-center"></div>
<div class="col-md-5 text-center"></div>
<div class="col-md-2 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>
字体图标:
<div class="col-md-2 text-center">
<a class="mobile-link" href="#">
<i class="icon-mobile"></i>
<span>手机微金所</span>
<!-- 这里使用的是bootstrap中的字体图标 -->
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="..." alt="">
</a>
</div>
@font-face {
font-family: 'itcast';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"] {
/*注意上面选择器中间的空格*/
/*我们使用的名为itcast的字体就是上面的@font-face的方式声明的*/
font-family: itcast;
font-style: normal;
}
.icon-mobilephone::before{
content: '\e908';
}
小屏幕隐藏:
hidden-xx : 在某种屏幕下隐藏
visible-xx : 在某种屏幕尺寸下显示
<div class="topbar hidden-xs hidden-sm"></div>
<div class="topbar visible-md visible-lg"></div>
导航通栏:
navbar-default:默认的外观
navbar-inverse:暗色背景的样式
也可以自定义样式
<nav class="navbar navbar-itcast navbar-static-top">
<div class="container">
<div class="navbar-header">
<button id="btn" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切换菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要投资</a></li>
<li><a href="#">我要借款</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">微论坛</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>
图片响应式
目的:
各种终端都需要正常显示图片
移动端应该使用更小(体积)的图片
实现方式:
将元素中直接设置的图片背景删除,换成两个data-属性(如:data-img-sm="小图路径",data-img-lg="大图路径")
通过JS的方式获取屏幕的宽度;
判断屏幕宽度是否小于一定的值(如:768)
根据判断情况决定使用具体的大图还是小图
小图片不需要使用背景的方式
小图如果还是使用背景的方式,当屏幕特别小时,效果很差
所以当使用小图时,改用img的方式