bootstrap-meta，@madie

最新推荐文章于 2023-11-25 20:20:28 发布

原创最新推荐文章于 2023-11-25 20:20:28 发布 · 767 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #meta #madie #ico

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过<meta>标签设置视口属性实现不同设备上的适配，并使用CSS媒体查询来调整不同屏幕尺寸下的页面样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一

<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="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以上