bootstrap-meta，@madie
一
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- width - viewport的宽度
- height - viewport的高度
- initial-scale - 初始的缩放比例
- minimum-scale - 允许用户缩放到的最小比例
- maximum-scale - 允许用户缩放到的最大比例
- user-scalable - 用户是否可以手动缩放
<link rel="icon" href="/favicon.ico" type="image/x-icon">
三
@media screen
and (max-width:
768px) {
body{
background-color:
red;
}
}
@media screen
and (min-width:
768px)
and (max-width:
992px) {
body{
background-color:
yellow;
}
}
@media screen
and (min-width:
992px)
and (max-width:
1200px) {
body{
background-color:
blue;
}
}
@media screen
and (min-width:
1200px) {
body{
background-color:
aqua;
}
}
不同屏幕大小下显示不同的背景，大体就是这四种屏幕
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }这个是菜鸟教程里面的，专门为bootstrap准备的。
看那两红色的框就行了，他们两的关系就是差那么个padding-left/right
附加
<!--网页作者-->
<meta name="author" content="路迈网，technique center，HJ">
<!-- 版权-->
<meta name="copyright" content="路迈网">
<!-- 关键字使用","分隔 -->
<meta name="keywords" content="再制造，再制造产品，再制造产业，再制造零配件，再制造卡钳，再制造起动机，再制造发动机，再制造发电机，再制造变速器，再制造助力泵，路迈网">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
现在倒是有不少网站都开始有这个了可也去这里看看，解释的比较详细，下面是源码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--网页作者--> <meta name="author" content="路迈网，technique center，HJ"> <!-- 版权--> <meta name="copyright" content="路迈网"> <meta name="hj" content="*n"> <!-- 关键字使用","分隔 --> <meta name="keywords" content="再制造，再制造产品，再制造产业，再制造零配件，再制造卡钳，再制造起动机，再制造发动机，再制造发电机，再制造变速器，再制造助力泵，路迈网"> <title>再制造|再制造产品|再制造产业|再制造零配件|再制造发动机|路迈网-路迈网-中国专业再制造产品电商平台</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> @media screen and (max-width: 768px) { body{ background-color: red; } } @media screen and (min-width: 768px) and (max-width: 992px) { body{ background-color: yellow; } } @media screen and (min-width: 992px) and (max-width: 1200px) { body{ background-color: blue; } } @media screen and (min-width: 1200px) { body{ background-color: aqua; } } </style> </head> <body> <div class="container"> <div class="row text-center"> <div class="col-md-4 col-sm-6 col-xs-12">col-md-4 col-sm-6 col-xs-12</div> <div class="col-md-4 col-sm-6 col-xs-12">col-md-4 col-sm-6 col-xs-12</div> <div class="col-md-4 col-sm-6 col-xs-12">col-md-4 col-sm-6 col-xs-12</div> </div> </div> </body> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </html>
里面的文件自己去引用jQuery版本1.10以上