欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

bootstrap-meta,@madie

程序员文章站 2024-02-15 20:47:16
...

<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 - 用户是否可以手动缩放

bootstrap-meta,@madie

<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准备的。

bootstrap-meta,@madie

看那两红色的框就行了,他们两的关系就是差那么个padding-left/right


附加

    <!--网页作者-->
    
<meta name="author" content="路迈网,technique centerHJ">
    <!-- 版权-->
    
<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以上