bootstrap-meta，@madie

来源：互联网发布：python cmdb源码编辑：程序博客网时间：2024/05/23 00:29

一

<metaname="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 screenand (max-width:768px) {
            body{
                background-color:red;
            }
        }
        @media screenand (min-width:768px)and (max-width:992px) {
            body{
                background-color:yellow;
            }
        }
        @media screenand (min-width:992px)and (max-width:1200px) {
            body{
                background-color:blue;
            }
        }
        @media screenand (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

附加


    <metaname="author"content="路迈网，technique center，HJ">
    
    <metaname="copyright"content="路迈网">
    
    <metaname="keywords"content="再制造，再制造产品，再制造产业，再制造零配件，再制造卡钳，再制造起动机，再制造发动机，再制造发电机，再制造变速器，再制造助力泵，路迈网">

<metahttp-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="huangjun">    <!-- 关键字使用","分隔 -->    <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以上

阅读全文

0 0