移动WEB开发之响应式布局

于 2023-02-28 17:58:17 发布
阅读量480 收藏 3
点赞数
分类专栏： html5+ccs3基础 文章标签： 前端 html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52372037/article/details/129217463
版权

一、移动web开发响应式布局导读

在这里插入图片描述在这里插入图片描述

二、响应式开发原理在这里插入图片描述

三、响应式布局容器在这里插入图片描述在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局原理</title>
    <style>
        .container {
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        /* 1. 超小屏幕下 小于 768 布局容器的宽度为100% */
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
        }

        /* 2. 小屏幕下 大于等于768 布局容器改为 750px */
        @media screen and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }

        /* 3. 中等屏幕下 大于等于992px 布局容器改为 970px */
        @media screen and (min-width: 992px) {
            .container {
                width: 970px;
            }
        }

        /* 4. 大屏幕下 大于等于1200 布局容器修改为 1170 */
        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>

<body>
    <!-- 响应式开发里面，首先需要一个布局容器 -->
    <div class="container"></div>
</body>

</html>

四、响应式导航案例在这里插入图片描述在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .container {
            width: 750px;
            margin: 0 auto;
        }

        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }

        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }

            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- ul>li{导航栏}*8 -->
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>

</html>

五、Bootstrap前端开发框架在这里插入图片描述

1.Bootstrap简介

https://www.bootcss.com/
https://getbootstrap.com/

在这里插入图片描述在这里插入图片描述在这里插入图片描述

在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

2. Bootstrap使用
（1）创建文件夹结构在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述

（2）创建html骨架结构在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

（3）引入相关样式文件在这里插入图片描述
（4）书写内容在这里插入图片描述在这里插入图片描述
3.Bootstrap布局容器

在这里插入图片描述

4.Bootsrap栅格系统
（1）bootstrap栅格系统简介

在这里插入图片描述

（2）bootstrap栅格系统的使用在这里插入图片描述
栅格选项参数

在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }

        .container .row:nth-child(5) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <!-- div{$}*4 -->
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
        <!-- 如果孩子的份数相加等于12 则孩子能占满整个container的宽度 -->
        <div class="row">
            <!-- div{$}*4 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>
        <!-- 如果孩子的份数相加小于12 则孩子不能占满整个container的宽度 会有空白 -->
        <div class="row">
            <!-- div{$}*4 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-1">3</div>
            <div class="col-lg-1">4</div>
        </div>
        <!-- 如果孩子的份数相加大于12 则多出的部分那一列会另起一行显示 -->
        <div class="row">
            <!-- div{$}*4 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
        <!-- 一个盒子可以添加多个类名 -->
        <div class="row">
            <!-- div{$}*4 -->
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
    </div>
</body>

</html>
5.Bootstrap列嵌套

在这里插入图片描述
在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row>div {
            height: 50px;
            background-color: pink;
            /* 如果想要空隙，一定不能加margin值，因为它实现划分的原理是每一份占33.3%，如果加了margin值他会掉下来的 */
            /* margin: 0 10px; */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <!-- 小盒子也是一共占12份（把父盒子看成12等份） -->
                <!-- 我们列嵌套最好加1个行 row 这样小盒子才是顶着父元素开始划分的（这样可以取消父元素的padding值）而且高度自动和父盒子一样高 -->
                <div class="row">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>
</body>

</html>
6.Bootstrap列偏移

方案1：给一个margin:right值（pass）
因为这是一个响应式的网页，不知道给margin具体多大的值。
方案二：一个盒子占四份，剩下四份空白会在右侧盒子右边（pass）
方案三：分成三个盒子，第一个盒子占4份，第二个空盒子占4份，第三个盒子占4份
方案四：右侧盒子右偏移（它本质上也是给盒子加了一个外边距，只不过这个外边距是浏览器给我们算出来的）
在这里插入图片描述在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <!-- 偏移的份数就是12-两个盒子的份数 -->
            <div class="col-md-4 col-md-offset-4">右侧</div>
        </div>
        <div class="row">
            <!-- 所有盒子默认都是贴左侧对齐的 -->
            <!-- 如果只有一个盒子要居中对齐 偏移=（12-盒子份数）/2 -->
            <div class="col-md-8 col-md-offset-2">中间盒子</div>
        </div>
    </div>
</body>

</html>
7.Bootstrap列排序

原理：把右侧的盒子往左边拉，把左侧的盒子往右边推
在这里插入图片描述

8.Bootstrap响应式工具
响应式工具

在这里插入图片描述在这里插入图片描述

淘宝：
大屏
在这里插入图片描述
小屏
在这里插入图片描述

代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap 的样式文件 -->
    <!-- bootstrap文件要和html文件建立在一个目录下，不然引用不了 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .row div {
            height: 300px;
            background-color: purple;
        }

        .row div:nth-child(3) {
            background-color: pink;
        }

        span {
            font-size: 50px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <span class="visible-lg">我会显示哦</span>
            </div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md hidden-xs">灰白糯米藕书</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>
</body>

</html>
web一阶段 day27
gaoyuan0277的博客
08-16 494
响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。
前端响应式开发剖析
最新发布
caperxi的博客
10-07 961
响应式设计是当今网页开发中至关重要的理念和技术手段，其核心目标是确保同一个网站能够在多种多样的设备上，无论是传统的PC端，还是日益普及的移动端（涵盖平板设备、手机的横屏以及竖屏等不同状态），都展现出高度的兼容性和良好的视觉效果。这意味着用户无论使用何种设备访问网站，都能获得流畅、舒适且一致的浏览体验，无需为不同设备的适配问题而困扰。例如，一个电商网站采用响应式设计后，用户在PC端可以清晰地看到丰富的商品分类、详细的产品介绍和高清的图片展示，方便进行细致的筛选和比较；
web响应式布局
Ares_song的博客
04-30 1277
随着4G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件...
WEB-响应式布局
weixin_44908855的博客
07-01 928
1. 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同设备的目的 2. 响应式布局容器 响应式需要一个父级作为布局容器，来配合自己元素实现变化效果 原理就是在不同宽度的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小， 从而实现不同屏幕下，看到不同页面布局和样式变化 常见的响应式尺寸划分 超小屏幕（手机，小于768px）：设置宽度为100% 小屏幕（平板，大于等于768px）：设置宽度为750px 中等屏幕（桌面显示器，大于等于99
web---响应式布局
weixin_57097732的博客
07-28 139
设置viewport <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=3.0"> <title>viewport</title> <st..
Web前端开发中响应式布局
xiaoxiaote的博客
03-20 737
响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 一、视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率
简要了解jQuery移动web开发的响应式布局设计
11-24
响应式布局设计是现代Web开发的关键技术之一，它允许网页根据用户所使用的设备屏幕尺寸自动调整布局，确保在任何设备上都能提供良好的用户体验。在jQuery Mobile框架中，开发者可以利用CSS3媒体查询来实现响应式设计...
移动web开发之响应式布局
function_road的博客
05-07 1241
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备的划分情况： 小于768的为超小屏幕（手机） 768~992之间的为小屏设备（平板） 992~1200的中等屏幕（桌面显示器） 大于1200的宽屏设备（大桌面显示器） 1.2 响应式布局容器 响应式需要一个父级做为布局容器，来配合子...
bootstrap-移动WEB开发之响应式布局
curacaolb的博客
06-26 908
响应式布局学习目标 一个页面兼容了pc端，pad端，和手机端 响应式布局是不需要单独写移动端页面的 响应不同的设备发生不同的变化的，包括三端
响应式web布局
做一个有趣的妞儿
08-25 743
响应式web： 2010年，Ethan Marcotte提出（媒体查询+栅格布局+弹性图片） 设计理念： 1）一个网页设计，多个设备使用； 2）移动优先 用户体验： 经过精心筛选，有选择性的显示页面内容。 技术层面： 1）HTML5+CSS3基础网页设计 2）HTML5的viewport提供可视化窗口 3）CSS3媒体查询（@med...
移动WEB开发-响应式布局
qq_52822043的博客
03-16 224
1. 响应式开发 1）原理 原理：通过媒体查询针对不同宽度的设备进行布局和样式的设置，从而使配不同设备的目的。 2）响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理：在不同屏幕下通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下看到不同的页面布局和样式变化。 2. 3. ...
移动web开发响应式布局
czx1826488201的博客
11-06 236
1. 响应式开发 可以在pc端，移动端 页面端显示。 1.1 响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2 响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理 ： 不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素排列方式和大小，从而实现不同屏幕下，看到的页面布局和样式变化。 注意：这种布...
响应式web开发
爱敲代码的狼仔
08-05 3511
响应式web开发 概述（什么是响应式） 响应式设计的页面会根据用户的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。 具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。 背景：移动...
移动端WEB开发之响应式布局
qq_46199553的博客
09-11 929
1. 响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 平时我们的响应式尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100%  小屏幕（平板，大于等于 768px）：设置宽度为 750px 
响应式布局Bootstrap--学习笔记
weixin_43482965的博客
03-05 780
一、响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕（手机） < 768px 小屏设备（平板） >= 768px ~ < 992px 中等屏幕（桌面显示器） >= 992px ~ <1200px 宽屏设备（大桌面显示器） >= 1200p...
响应式Web
weixin_30533797的博客
05-25 295
响应式布局的核心是：适配不同视口大小的流式布局。 RWD和AWD RWD：Responsive Web Design AWD：Adaptive Web Design 实现RWD，多使用流式布局。针对所有不同类型的客户端类型设置了几个不同的断点，浏览器收到页面之后会识别其中的css 媒体查询而使用不同的css声明，适配自己的尺寸(分辨率等)来选择css规则。 AWD，不同之...
响应式网页设计与应用
dai0941的专栏
04-25 680
每个设计师都想自己的网站可以在任何设备上体验都很牛，神马iPhone、ipad、黑莓、kindle……无所不能啊~ 苦逼的是这些东东的系统不一样，分辨率也不一样啊；电脑的屏幕越来越大，但是还有一半的用户还是用的17寸CRT；手机、pad层出不穷，没有个统一标 准，我们又不想失去任何一个用户，这可苦了我这些设计师了，需要付出更多的心血来获得更好的体验，谁让我们是射击湿呢。 电子产品更新换代节奏都快
HTML5移动Web开发中的响应式布局实践
“浅谈HTML5移动Web开发，讨论在移动端使用HTML5开发遇到的问题和解决方案，特别是响应式布局和媒体查询的应用。” 在HTML5移动Web开发中，选择使用Web技术而非Native App的原因往往在于其跨平台兼容性、更新便捷...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值