移动端WEB开发之响应式布局

一、响应式开发

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。

1.2 响应式布局容器

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分:
(1)超小屏幕(手机,小于 768px):设置宽度为 100%
(2)小屏幕(平板,大于等于 768px):设置宽度为 750px
(3)中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
(4)大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分。

二、Bootstrap前端开发框架

2.1 Bootstrap 简介

Bootstrap 来自 Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
中文官网:http://www.bootcss.com/
官网:http://getbootstrap.com/
推荐使用:http://bootstrap.css88.com/
框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
1. 优点
(1)标准化的html+css编码规范
(2)提供了一套简洁、直观、强悍的组件
(3)有自己的生态圈,不断的更新迭代
(4)让开发更简单,提高了开发的效率

2.2 Bootstrap 使用

在现阶段我们还没有接触JS相关课程,所以我们只考虑使用它的样式库。控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
Bootstrap 使用四步曲: 1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容。
1. 创建文件夹结构
2. 创建html骨架结构
3. 引入相关样式文件
4. 书写内容
(1)直接拿Bootstrap 预先定义好的样式来使用
(2)修改Bootstrap 原来的样式,注意权重问题
(3)学好Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果.

2.3 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类。
1. container 类
响应式布局的容器 固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)
2. container-fluid 类
流式布局容器 百分百宽度
占据全部视口(viewport)的容器。

三、Bootstrap 栅格系统

3.1 栅格系统简介

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列

3.2 栅格选项参数

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
(1)按照不同屏幕划分为1~12 等份
(2)行(row) 可以去除父容器作用15px的边距
(3)xs-extra small:超小; sm-small:小; md-medium:中等; lg-large:大;
(4)列(column)大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
(5)每一列默认有左右15像素的 padding
(6)可以同时为一列指定多个设备的类名,以便划分不同份数 例如 class="col-md-4 col-sm-6"

3.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

3.4 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。

3.5 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

3.6 响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/529371.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HJ37 统计每个月兔子的总数(动态规划)

高端的食材,往往只需要最简单的烹饪方法。 import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的…

sql注入之堆叠和二次注入

1.1 堆叠注入原理 堆叠注入(Stacked Injection)是一种SQL注入技术,它允许攻击者一次性执行多条SQL语句。其原理主要是利用Web应用程序中的输入验证不严格,通过在输入字段中插入分号(;)来分隔并构造新的SQL…

【C++ STL有序关联容器】map 映射

文章目录 【 1. 基本原理 】【 2. map 的创建 】2.1 调用默认构造函数,创建一个空的 map2.2 map 被构造的同时初始化2.3 通过一个 map 初始化另一个 map2.4 取已建 map 中指定区域内的键值对,初始化新的 map2.5 指定排序规则 【 2. map 元素的操作 】实例…

最大食物链计数【拓扑排序】

P4017 最大食物链计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<iostream> #include <algorithm> #include <vector> #include <queue> using namespace std; #define int long long const int N2e5100; const int mod80112002; int n,…

小米汽车:搅动市场的鲶鱼or价格战砧板上的鱼肉?

3月28日晚&#xff0c;备受关注的小米汽车上市发布会召开&#xff0c;小米集团董事长雷军宣布小米SU7正式发布。小米汽车在带飞股价的同时&#xff0c;二轮订购迅速售尽。 图一&#xff1a;小米集团股价 雷军口中“小米汽车迈出的第一步&#xff0c;也是人生最后一战的开篇”&a…

如何用微信云开发制作一款商城小程序

微信云开发提供了一整套开发小程序的服务&#xff0c;包括数据库、存储、云函数等&#xff0c;可以帮助商家快速搭建小程序&#xff0c;降低开发成本&#xff0c;提高开发效率。下面&#xff0c;我们将探讨如何使用微信云开发来开发一款商城小程序。 一、注册小程序账号 可以…

三小时使用鸿蒙OS模仿羊了个羊,附源码

学习鸿蒙arkTS语言&#xff0c;决定直接通过实践的方式上手&#xff0c;而不是一点点进行观看视频再来实现。 结合羊了个羊的开发思路&#xff0c;准备好相应的卡片素材后进行开发。遇到了需要arkTS进行解决的问题&#xff0c;再去查看相应的文档。 首先需要准备卡片对应的图片…

swampCTF 2024

swampCTF 2024 MISC Discord Challenge swampCTF{w3lc0m3_t0_th3_swamp} What the Form google form不停重定向&#xff0c;直接F12看一下。flag就在前端。 swampCTF{F0rm5_K33p5_D4T4_H1dd3n} OSINT Lost in Space 图片是旅行者2号&#xff0c;问距离地球多少个天文单…

Games101-光线追踪(基本原理)

光线追踪和光栅化是两个不同的成像方式。 光栅化最大的问题是无法很好的表示全局的效果。 全局效果包括 软阴影(shadow mapping后来被改进成能够支持软阴影&#xff0c;阴影随着离物体越远越来越模糊)&#xff0c;glossy反射(类似镜子&#xff0c;但没有镜子那么光滑&#xff0…

蓝桥杯2023年第十四届省赛真题-棋盘

solution1(暴力) 暴力蓝桥杯可以过&#xff0c;虽然理论上会超时~ #include<iostream> using namespace std; const int maxn 2010; int a[maxn][maxn] {0};//0白棋&#xff0c;1黑棋 int main(){int n, m, x1, x2, y1, y2;scanf("%d%d", &n, &m)…

基于单片机水塔水位检测控制系统设计

**单片机设计介绍&#xff0c; 基于单片机水塔水位检测控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机水塔水位检测控制系统设计的主要目标是实现水塔水位的自动监测与控制&#xff0c;确保水塔内的水位始…

代码随想录第35天| 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球

860.柠檬水找零 860. 柠檬水找零 - 力扣&#xff08;LeetCode&#xff09; 代码随想录 (programmercarl.com) 贪心算法&#xff0c;看上去复杂&#xff0c;其实逻辑都是固定的&#xff01;LeetCode&#xff1a;860.柠檬水找零_哔哩哔哩_bilibili 在柠檬水摊上&#xff0c;每…

如何在 iOS 项目中集成 MiniApp SDK,快速构建智能小程序?

本文介绍如何在 iOS 项目中&#xff0c;集成 MiniApp SDK&#xff0c;使之能够构建智能生活小程序&#xff0c;运行在你的 IoT App 上。 准备工作 在集成 MiniApp SDK 之前&#xff0c;您需要在 涂鸦 IoT 开发平台 上&#xff1a; 注册开发者账号、创建产品、创建功能点等。…

【静态分析】静态分析笔记02 - Intermediate Representation

参考&#xff1a; [南京大学]-[软件分析]课程学习笔记(二)-IR_ast和ir的区别-CSDN博客 ------------------------------------------------------------------------------------------------------------ 1. compilers and static analyzers compiler 是将 Source Code 转…

实时云渲染视频流化Webgl引擎模型技术原理

数字孪生领域很多项目B/S架构下交付使用的是webgl方案&#xff0c;该方案有其自身的优势&#xff0c;降低了用户在使用数字孪生或者虚拟仿真模型时需要的高性能显卡。但其也有自身无法忽视的困境&#xff0c;比如一些数据量大的模型&#xff0c;需要验证依赖下载时的网络环境&a…

c语言驾驶员理论课程模拟考试与学习系统1300

定制魏&#xff1a;QTWZPW&#xff0c;获取更多源码等 目录 1问题描述 2功能要求 【选做要求】 【其他要求】 部分代码展示 效果展示 程序设计题4:驾驶员理论课程模拟考试与学习系统 1问题描述 要求编写一个程序&#xff0c;模拟驾驶员科目一的考试&#xff0c;要求具有良…

Android获取连接到手机热点上的设备信息

主题&#xff1a;在手机开启热点网络的情况下&#xff0c;想要获取是哪个设备已经连接上了当前开启的热点。 实现思路&#xff1a;Android通过读取 /proc/net/arp 文件可以得到连接当前热点的设备信息&#xff0c;包括Mac地址、IP地址等信息。 一. 方法逻辑&#xff1a; /*** …

Webots常用的执行器(Python版)

文章目录 1. RotationalMotor2. LinearMotor3. Brake4. Propeller5. Pen6. LED 1. RotationalMotor # -*- coding: utf-8 -*- """motor_controller controller."""from controller import Robot# 实例化机器人 robot Robot()# 获取基本仿真步长…

IDEA无法成功配置Tomcat的解决方法(IDEA版本问题)

在创建Servlet时&#xff0c;下载了Tomcat文件夹以及成功配置了环境变量之后&#xff0c;在IDEA中怎么都找不到Tomcat&#xff0c;尝试了网络中的各种方法&#xff0c;都不行&#xff0c;结果发现时IDEA版本的问题。因为我下的IDEA是社区版的&#xff0c;所以没有自带的Tomcat&…

Flutter开发之图片选择器

使用FLutter开发了一个图片选择的组件&#xff0c;功能如下&#xff1a; 1、支持设置最大可选图片的个数&#xff1b; 2、根据选择的图片个数自适应容器组件的高度&#xff1b; 3、可设置容器的最大高度&#xff1b; 4、支持点击放大和删除功能&#xff1b; 具体效果如下 …