【新】移动端（响应式布局）

最新推荐文章于 2025-05-24 22:11:29 发布

原创最新推荐文章于 2025-05-24 22:11:29 发布 · 497 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web

响应式布局：同一套代码适应不同的设备屏幕

企业站或内容很少的可以改成响应式

电商类内容太多，无法做到响应式，做成 pc一个网站，移动端一个网站

1.媒体查询：max-width（从大到小书写）

min-width （从小到大书写）

（是区间不是等于）依旧存在层叠性

<style>
        /* 视口宽度小于等于768px， 网页背景色是粉色 */
        @media (max-width: 768px) {
            body {
                background-color: pink;
            }
        }

        /* 视口宽度大于等于1200px， 网页背景色是skyblue */
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }
        
    </style>

外链式css引入

 <link rel="stylesheet" href="./one.css" media="(min-width: 992px)">

隐藏：

 /* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
        @media (max-width: 768px) {
            .left {
                display: none;
            }
        }

2.Bootstrap框架 （快速开发响应式网站）

由twitter 开发维护的前端ul框架，编写好大量css样式，利用class 调用即可，没有自己想要的css，自己补充即可

使用步骤：

（1）引入样式表：

bootstrap.min.css （经过压缩，体积较小）/ bootstrap.css（按照人的习惯书写）

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

（2）调类名

container：版心类名，调用即可

① 栅格系统布局响应式网页

将网页宽度等份成12份

响应断点：媒体查询区间

col-xs-份数

<!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
    <!-- col-lg-3 表示大屏 4个内容 每个内容占3份 12 / 4 =3 -->
    <!-- col-md-6 表示中屏 2个内容 每个内容占6份 12 / 2 =6 -->
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>

类名：.container：默认为指定宽度且居中。（版心样式）（自带间距15px）

.container-fluid : 宽度均为 100%。

.row：自带左右-15px内边距（row类作用就是抵消container类的15px的内边距, row有-15px的外边距）

（1为调用.container类 2为调用.row类）

全局css样式：控制单独标签样式，找css样式再调用类名控制样式

组件：网页里面常见的区域字体图标下拉菜单导航警告框弹出框，调用样式

HTML内容也有，可自行修改

字体图标使用与iconfont一样，同样两个类名

js插件：

使用方法：

① 引入bootstrap样式表

  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

② 引入js文件：jQuery.js + bootstrap.js样式表

 <script src="./js/jquery.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

轮播图、下拉菜单，交互效果

定制：找类名（ctrl+f）修改参数，重新下载，重新引入新的样式表响应式：