【前端】移动端布局（流式、flex、媒体查询、响应式）

最新推荐文章于 2024-04-29 11:17:53 发布
最新推荐文章于 2024-04-29 11:17:53 发布
阅读量2.3k 收藏 14
点赞数 5
分类专栏： 前端学习 文章标签： html css bootstrap less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40932102/article/details/109529819
版权

文章目录

移动端布局

1. 移动端现状

  • 内核
    • 当前国产主流手机浏览器，内核都是Webkit
  • 分辨率：手机分辨率，碎片化太多
    • Android：480x800, 480x854, 540x960, 720x1280，1080x1920 等
    • iPhone：640x960, 640x1136, 750x1334, 1242x2208 等
    • 2K、4K等高分辨率

在开发过程中，Google chrome是主要模拟手机的手段之一，步骤：

  1. 鼠标右键 检查 或 F12 控制器界面方向
  2. 选择 手机模式
  3. 选择 手机类型及尺寸；调节适当的显示比例；
  4. 点右键 查看 页面元素；

在这里插入图片描述

2. viewport(视口)

定义：

视口：浏览器（PC、移动端）显示页面内容的屏幕区域；不同的屏幕的大小，我们看到的区域也是不同的；

PC端的页面直接放入手机屏显示，不友好，可以用viewport来解决
在这里插入图片描述
在这里插入图片描述

HTML宽度默认为980px，不是很合适；

各手机型号尺寸：

设备尺寸（英寸）开发尺寸（px）物理像素比（dpr）
iphone3G3.5320*4801.0
iphone4/4s3.5320*4802.0
iphone5/5s/5c4.0320*5682.0
HTC One M84.5360*6403.0
iphone64.7375*6672.0
Nexus44.7384*6402.0
Nexus5x5.2411*7312.6
iphone6 Plus5.5414*7363.0
Samsung Galaxy Note45.7480*8533.0
Sony Xperia Z Ultra6.4540*9602.0
Nexus 7(‘12)7.0600*9601.3
iPad Mini7.9768*10241.0

那么设置HTML宽度多少为合适呢？设置为屏幕的窗口大小应该正好合适

设置viewport

meta标签设置：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">

width=device-width：改变HTML默认的980px 为 屏幕的宽度；

user-scalable: 是否允许用户缩放屏幕 值：no(0不允许) yes(1允许)；

initial-scale：初始化缩放比例；1.0：不缩放；

maximum-scale：用户对页面的最大缩放比例；值：比例

minimum-scale：用户对页面的最小缩放比例；值：比例

3. 二倍图

物理像素点

  • 指计算机显示设备中的最小单位，即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光
    点。每个点可以发一个颜色，就是我们看到的画面。
  • 早期的屏幕，物理像素点都比较大，随着技术的进步，物理像素点会被做的越来越小。

屏幕分辨率

  • 由物理像素点的个数来衡量，表示屏幕水平和垂直方向的物理像素点的个数。

例如：iPhone3和iPhone4是同一个屏幕尺寸下，比较分辨率：

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里；从而达到更高的分辨率，并提高屏幕显示的细腻程度。

image-20201105133553373

图片分辨率

假设：有200*200分辨率的图片，展示在宽度分别是320（iphone3）、640(iphone4)分辨率的手机上，展示
的效果如下：
在这里插入图片描述

可以看出，不同的屏幕下，显示的图片大小是不一样的；物理像素点的宽度大小为1：0.5，物理像素点的数量：320（1 x 200=200长度）、640(0.5 x 400=200长度；都设为是200长度，才能保证显示的大小一样，这时320的屏幕是200像素点，而640的屏幕是400个像素点。

在移动端，我们可以通过设置CSS样式宽高200px后，会自动保证每个屏幕显示元素大小一样，它会自动算出不同屏幕下，背后需要提供物理像素点需要多少个。

二倍图

像针对640分辨率手机屏（iPhone4），要求设计给400*400图，对应我们CSS设置200px,有二倍的关系：

命名：

  • xxxxx@2x.png：二倍图
  • xxxxx@3x.png：三倍图

4.移动端常见布局

了解常见布局不同，针对业务需求选择不同的方案；实际开发过程中，都是混合使用，没有哪一种是绝对的单独使用。

常见布局包括以下几种方式：

  • 单独制作移动端页面
    • 流式布局 (百分比布局)
    • flex弹性布局 (强列推荐)
    • less+rem+媒体查询布局
    • 混合布局
  • 响应式页面兼容移动端
    • 媒体查询
    • bootstrap

比较：

  • 单独制作：流式、flex、rem布局、专门针对各种手机屏幕进行开发。例如：淘宝、京东、苏宁手机端都是单独制作的
  • 响应式：可兼容PC 移动端，一个页面多个端适配显示；制作起来要考虑到兼容性的样式。例如：三星电子官网www.samsung.com/cn/ 就是响应式布局

4.1 流式布局

看下面代码，左右两部分以百分比来定义宽度，这样无论屏幕如何变化都可以保证效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .op{
            width: 100%;
            border: 1px solid red;
            overflow: hidden;
        }
        .op>div{
            float: left;
        }
        .left{
            width: 40%;
            height: 200px;
            background: blue;
        }
        .right{
            width: 60%;
            height: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="op">
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
</html>

4.2 flex布局

参考自Flex 布局教程：语法篇

4.2.1 flex介绍

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

传统布局与flex布局比较：

  • 传统布局：

    • 兼容性好、布局繁琐、浮动（清除浮动）
    • 有局限性不能在移动端很好的布局

  • flex布局：

    • 操作方便，布局极其简单，移动端使用比较广泛
    • PC端浏览器支持情况比较差

    如果是PC端页面布局，采用传统方式；如果是移动端或者是不考虑兼容的PC端则采用flex布局

flex布局特点：

  • 任何一个容器标签都可以指定使用 flex 布局。
  • 当为父标签设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • 使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素，
  • flex通过行和列的思路来控制布局；

基本概念：

采用 flex 布局的元素，称为 flex 容器（flex container），父级简称"容器"。它的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称"项目"。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iUTK1siP-1604640181230)(https://i.loli.net/2020/11/05/Oznr9KpjHYfoLe8.png)]

语法使用：

任何一个容器都可以指定为 Flex 布局。

.box{
 display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
 display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
 display: -webkit-flex; /* Safari */
 display: flex;
}
4.2.2 容器属性

容器属性有以下6个

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。元素默认按照确认的主轴方向进行排布。

flex-direction:row | row-reverse | column | column-reverse;

它有4个值：

属性值说明
row (默认值)水平方向 ，从左到右
row-reverse水平方向，从右到左
column垂直方向，从上到下
column-reverse垂直方向，从下到上

flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap:nowrap | warp | wrap-reverse;

它有3个值：

属性值说明
nowarp(默认值)不换行；子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置
warp换行，子项的总宽加起来超过父级宽度，就会换行，第一行在上方
warp-reverse换行，子项的总宽加起来超过父级宽度，就会换行，第一行在下方

flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式，类似word里的左对齐，右对齐，居中对齐，分散对齐；

justify-content: flex-start | flex-end | center | space-between | space-around;

它有5个值：

属性值说明
flex-start(默认值)从头部开始 排列，如果主轴是x轴，则从左到右（左对齐）
flex-end从尾部开始排列
center在主轴居中对齐（如果主轴是x轴 水平居中）
space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-between两端对齐，项目之间的间隔都相等。

在这里插入图片描述

align-items属性

align-items属性是控制子项单行在侧轴（交叉轴，默认是y轴）上的对齐方式，在子项为单项（单行）的时候使用；整体一行元素看成整体，设置在侧轴上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;

它有5个值：

属性值说明
flex-start交叉轴的起点对齐(如果是y轴 ，从上到下）
flex-end交叉轴的终点对齐
center交叉轴的中点对齐。
stretch(默认值)如果项目未设置高度或设为auto，将占满整个容器的高度。
baseline项目的第一行文字的基线对齐。

在这里插入图片描述

align-content属性

align-content属性设置项目在侧轴的排列方式 ，只能用于子项出现换行或者多行的情况,如果项目只有一根轴线(一行)，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

它有6个值：

属性值说明
flex-start从侧轴头部开始排列
flex-end从侧轴尾部开始排列
center在侧轴中间显示
stretch(默认值)项目高度平分容器高度
space-between与侧轴两端对齐，轴线之间的间隔平均分布。
space-arond每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

在这里插入图片描述

4.2.3 项目属性

项目属性有以下6个：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order属性

flex-grow属性
在这里插入图片描述

flex-shrink属性

flex-basis属性

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

除了auto，其他5个属性值的含义与align-items属性完全一样。

4.3 移动端适配

4.3.1 媒体查询

媒体查询可以感受到屏幕的变化；可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示。

  1. CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；

  2. 感受屏幕变化，屏幕变化就是宽度的变化，通过预设置，当屏幕到了我已经预设置的变化的范围，就会把我提前设置好的样式进行生效；

语法：CSS样式如下

/*
mediatype 查询类型:
-----------------
all 所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。

条件:
----
and 并且 not 不满足 only 仅仅满足

media feature 查询条件:
----------------------
width,min-with,max-width
*/
@media mediatype and|not|only (media feature) {
	CSS-Code;
}

**例子：**如果文档宽度小于 500 像素则修改背景颜色(background-color)

/* min-width/max-width：最小界值，最大界值；查询条件包含等于号；*/
@media screen and (max-width:499px) {
	body {
		background-color: red;
	}
}
4.3.2 rem

rem是一个相对单位，类似于em，

不同的是rem的基准是相对于html元素的字体大小，em是父元素字体大小。

rem让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

rem单位，可以控制整个页面所有元素有关PX类（宽、高、padding、margin、top…）只要是你设置数值的地方都可以实现控制；

根(root): 1 rem代表HTML的font-size大小；

/* 1.根html 为 10px */
html {
	font-size: 10px;
}
/* 2.此时 div 的宽就是 150px */
div {
	width: 15rem;
}

rem应用：

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。

@media screen and (min-width: 320px) {
	html {
		font-size: 20px;
	}
}
@media screen and (min-width: 640px) {
    html {
    	font-size: 40px;
    }
}
/*在屏幕宽度为320px-639px的设备上，div的宽高就都是20px;
在屏幕宽度大与等于640px的设备上，div的宽高就都是40px;*/
div {
    width:1rem;
    height:1rem;
}
4.3.3 less
  • less : 让你写更少的代码，实现相同的效果；
  • less :是一门 CSS 扩展语言，它扩展了CSS的动态特性。 CSS 预处理语言。
  • 常见的CSS预处理器：Sass、Less、Stylus 。
  • Less中文网址：http://lesscss.cn/

less安装：

sublime安装less和less2Css插件：

https://blog.csdn.net/redase/article/details/83998172

vscode安装less插件：

  • 在扩展：商店中搜 Easy Less安装即可

测试：写一个.less文件，保存，就会在当前目录生成一个对应的.css文件
在这里插入图片描述

less变量

变量是指没有固定的值，可以改变的。我们CSS中的一些颜色和数值等经常使用，可以设置为变量；语法：

//@变量名:值;
@bg:#333;
.box_1 {
	background-color: @bg;
}
.box_2 {
	background-color: @bg;
}

变量命名规则：

  • 必须有@为前缀
  • 不能包含特殊字符~=+、不能以数字开头
  • 大小写敏感区分；

less嵌套

类似HTML一样写less结构；语法：

/* css 写法 */
#header .logo {
	width: 300px;
}
/* less 写法 */
#header {
	.logo {
		width: 300px;
	}
}

交集|伪类|伪元素选择器，语法：

/* css写法 */
a:hover{
	color:red;
}
/* less写法 */
a{
	&:hover{
		color:red;
	}
}

less运算

任何数字、颜色或者变量都可以参与运算，Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

// 数字
width: 200px - 50;
// 颜色
background-color: #666 - #222;
// 注意：运算符中间左右有个空格隔开

运算后的单位选择：

  • 如果两个值之间只有一个值有单位，则运算结果就取该单位
  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

更多less的用法可以访问less的文档

  1. http://lesscss.cn/

  2. https://less.bootcss.com/

4.3.4 两种移动端适配方案
4.3.4.1 方案一 ：rem+媒体查询+less

上面已经说明过了

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。

大概步骤就是：

  1. 准备各个档位下的rem ：提前准备好各个档位下的HTML 的font-size大小；
  2. 拿到当前尺寸的1rem代表多少px；
  3. 计算比例：把页面刚才所有的元素的PX值替换为rem,可通过less来计算。
  4. 达到目标：那么，屏尺寸变化时，1rem(基础块)也会变化，自然就是等比缩放。
4.3.4.2 方案二：rem+ flexible.js+less

和上个方案实现原理一样，都是通过改变1rem(基础块)大小实现页面整体元素改变；

filexible.js

  • 手机淘宝团队出的 简洁高效 移动端适配库；和flex布局没有任何关系

  • github地址：https://github.com/amfe/lib-flexible

  • 不是通过设置CSS媒体查询设置font-size，通过 JS 设置font-size，效果是屏幕变化一点，就有一个rem重新计算；

function setRem () {
	// docEl.clientWidth JS获取当前屏幕的宽度
	// 除以10,得到基础块,(将屏幕划分为10块)
	var rem = docEl.clientWidth / 10;
	docEl.style.fontSize = rem + 'px'
}

举个例子：

  • 假如拿到屏幕宽度按430px设计的设计稿，

  • 拿到UI设计稿，原稿实现：页面上所有的元素，在设计稿上进行测量，代码实现；（流式、flex）只要是UI给图上有标注，就是写出来；先全部实现出来，一会儿统一替换；

    • 在哪里写？less文件
    • 需要把生成的css文件进行引入index.html；

  • 设计稿宽度/10 ：1rem = 43px；

  • 统一替换：100px=100/43 rem;

两种方案的对比

  • 相同：
    • 都是对font-size实现控制，1rem（基础块）变化，实现等比效果；
  • 不同：
    • rem+媒体查询+less：通过设置不同的档位下，设置不同的1rem值；效果为阶梯式变化；
    • flexible.js+rem：通过js设置不同的1rem值，效果为连续变化；这个看起来更为连贯，适配任何屏幕。

4.4 响应式布局

4.4.1 介绍

响应式布局可以通过同一份代码快速、有效适配手机、平板、PC设备等所有的屏幕。

响应式布局涉及屏幕宽度变化(媒体查询)和布局知识[传统布局方案(百分比、浮动、清除浮动、定位)]

4.4.2 档位划分

媒体查询：档位划分；市场上默认的划分，三个节点、四个档位

  • w<768 超小屏幕（xs）（手机）
  • 768<= w <992 小屏设备（sm）（平板）
  • 992<= w <1200 中等屏幕（md）（小显示屏的PC显示器）
  • 1200<=w 大宽屏设备（lg）（大桌面显示器）
    在这里插入图片描述
/*把市场上所有屏幕包括在内:*/
/* 1. 超小屏幕下 xs 小于 768 */
@media screen and (min-width: 0px) {
}
/* 2. 小屏幕下 sm 大于等于768 */
@media screen and (min-width: 768px) {
}
/* 3. 中等屏幕下 md 大于等于 992px */
@media screen and (min-width: 992px) {
}
/* 4. 大屏幕下 lg 大于等于1200 */
@media screen and (min-width: 1200px) {
}
4.4.3 版心

不同的档位下，版心不同；所有的子元素都是归于版心下，不同的版心宽度，意味着子元素要以不同的布局排版满足用户浏览友好的需求；

/* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
	.container {
		width: 100%;
	}
}
/* 2. 小屏幕下 sm 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
	.container {
		width: 750px;
	}
}
/* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px */
@media screen and (min-width: 992px) {
    .container {
    	width: 970px;
    }
}
/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
    .container {
    	width: 1170px;
    }
}

注意：

  • 媒体查询使用符号的相关：min-，max-包含等号，后面是数值单位为px；
  • 除超小屏以外：版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px；两边留空白，用户体验好。
  • 以上是市场默认划分，可根据自己需求添加档位；
4.4.4 BootStrap

BootStrap框架可快速搭建出响应式页面；

  • BootStrap 出自 Twitter（推特），是目前最受欢迎的前端响应式框架。

  • 网址：

    • 中文网：http://www.bootcss.com/

  • 版本：

    • 2.x.x：停止维护，代码不够简洁，功能不够完善。
    • 3.x.x：目前使用最多，稳定，不支持IE6-IE7。对 IE8 支持，界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB 项目。
    • 4.x.x：最新版，目前还不是很流行

使用

使用前需要先去官网下载，如无特殊需求，建议下载用于生产环境的。
在这里插入图片描述
下载完成后，将其整个文件夹放入你的项目中。

初始化html文件

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
        <meta charset="utf-8">
        <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>BootStrap Template</title>
        <!-- Bootstrap 的文件引入-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
        <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!-- 条件注释:解决小于IE9的版本一些问题 -->
        <!--[if lt IE 9]>
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	<body>
		<h1>你好，世界！</h1>
	</body>
</html>

条件注释：满足条件，下面代码链接就会发出请求；

[if lt IE 9]
	<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
[endif]

布局容器

  • 版心设置：BootStrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。
  • .container：设置不同档位下的版心的宽度；
    • 超小屏（xs : extra small）：手机； 0px <=w ；版心宽度为100%
    • 小屏（sm : small） ：平板； 768px<=w ；版心宽度定为 750px
    • 中屏（md: medium）：桌面；992px<=w ；版心宽度定为 970px
    • 大屏（lg: large）：大桌面；1200px<=w ；版心宽度定为 1170px
  • .container-fluid：百分百宽度；
  • 特点：
    • 所有元素为CSS3盒子模型；
    • 布局盒子有左右15px padding值；

Bootstrap预制类名

  • 排版

    <h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
...
<h6>h6. Bootstrap heading</h6>
<p>...</p>

    更多内容可以参考：https://v3.bootcss.com/css/#type

  • 按钮

    <a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

    更多内容可以参考：https://v3.bootcss.com/css/#buttons

  • 辅助类样式

    <!-- 上下文颜色 -->
<p class="text-muted">...</p>
<!-- 下拉三角 -->
<span class="caret"></span>

    更多内容可以参考：https://v3.bootcss.com/css/#helper-classes

  • 字体图标

    <!-- 搜索🔍 -->
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

    更多内容可以参考：https://v3.bootcss.com/components/#glyphicons

Bootstrap栅格系统

栅格系统可以设置子元素在不同档位下的布局；

栅格系统，在各个档位下，控制子元素布局不同；将版心宽度均分为12份；

各个档位下都有预制好的类前缀：
在这里插入图片描述

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中，控制不同的档位下，列的子元素占有几份

基本使用：

<!-- 中屏和以上占有6份 -->
<div class="container">
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>
<!-- 各个档位下，按照各个档位下布局 -->
<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">1</div>
        <div class="col-md-6 col-lg-8">2</div>
    </div>
</div>
  • 单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份；
  • 多个类前缀：分别按照各个档位列划分生效；
  • 每个子项：默认左右15px的padding；
  • 行（.row） 可以去除父容器左右15px的padding值：.row的左右margin为-15px；

列嵌套

可以在已经分好的子元素中内部，继续进行列的划分（共12份），继续在分好的布局内继续划分；

<!-- 直接嵌套 -->
<div class="col-sm-4">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
</div>

<!-- 使用row嵌套 -->
<div class="col-sm-4">
	<!-- 加1个行 row 这样可以表现出抵消父元素的左右15padding值 而且高度自动和父级一样高; -->
    <div class="row">
        <div class="col-sm-6">小列</div>
        <div class="col-sm-6">小列</div>
	</div>
</div>

列偏移：

划分好的子项进行列的份数偏移，场景：左右布局，居中布局；

<!-- 左右对齐-->
<div class="row">
    <!-- 如果只有一个盒子 那么就偏移 = 12-4-4 -->
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>
<!-- 居中-->
    <div class="row">
    <!-- 如果只有一个盒子 那么就偏移 = 2 8 2 -->
    <div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>

栅格系统相关内容可以参考：https://v3.bootcss.com/css/#grid

响应式工具

  • 注意：和列类前缀的参数形成对比记忆，
    • col-sm-* 是超小屏（包含）以上的屏幕都是这个份数的划分；
    • 响应式工具 只是对当前档位下的类前缀类名生效；

响应式工具相关内容可以参考：https://v3.bootcss.com/css/#responsive-utilities

AnswerCoder
关注
  • 5
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
pink老师移动端布局缺失资料.rar
06-10
"pink老师移动端布局缺失资料.rar" 这个压缩包文件显然包含了关于如何解决这些问题的关键资源，主要聚焦于四个核心概念：Flex布局、流式布局、rem单位以及Less预处理器，同时也涉及到响应式设计。以下是对这些知识点...
vue3+vite+js 实现移动端，PC端响应式布局
最新发布
半梅芒果干的博客
05-01 984
① 执行以下两个命令②main.js文件引用③ 根目录新建一个到这里就安装完成了，重新运行项目就可以在浏览器看到变化了。
使用flexible.js和第三方依赖包postcss-px2rem，解决pc端响应式和移动端自适应问题
在无知中学习，在学习中成长，在成长中学习
03-31 1873
使用flexible.js和第三方依赖包postcss-px2rem，解决pc端响应式和移动端自适应问题
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
weixin_67244432的博客
04-29 1872
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
前端技术—10. 移动端适配
不放手，不错过的博客
08-02 184
移动端布局，ren、less等相关知识
vue pc响应式+移动端适配flexible.js的使用方法
2201_75491624的博客
05-18 1930
适配pc端和移动端,同时在pc端需要响应式,使用flexible.js一套代码完成多端适配
pc端和移动端自适应, 做响应式网页
luoxiaonuan_hi的博客
07-21 8292
一套代码能够兼容适配不同的屏幕设备，内容不变布局效果变了，这样的网页就是响应式网页在开发中要想实现项目的响应式，建议使用媒体查询，在不同的宽度下显示不同的样式，1920下就是pc端的响应式，宽度设置的足够小可以匹配移动端的响应式。...
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
xiaoqin5的博客
10-10 1790
flexible.js适配pc端、移动端并自动将px转换rem 或者PC端px自动转vw
京东移动端首页 流式布局
05-10
流式布局是网页设计中的一种常见布局方式，尤其在移动端应用广泛，因为它能提供良好的响应式体验，确保页面内容在不同尺寸的设备上都能自适应显示。京东移动端首页的流式布局设计，是为了保证用户在手机、平板等不同...
Web-前端html+css从入门到精通 202. 移动端流式布局整页制作（4）.zip
05-23
在移动端布局中，我们可能需要使用`<meta>`标签来设置视口（viewport），以便控制页面在移动设备上的显示比例。例如： ```html , initial-scale=1.0"> ``` CSS（层叠样式表）则是用来控制网页的样式和布局。在流式...
移动端布局资料.rar
03-12
1. **响应式设计**：响应式网页设计（Responsive Web Design, RWD）是移动端布局的基础，它允许页面根据不同的设备和屏幕尺寸自动调整布局。核心概念包括媒体查询（Media Queries）、流式布局（Fluid Grids）和...
移动端CSS的学习笔记。
01-19
Flex布局是最推荐的移动端布局方式，它允许灵活地调整子元素的大小和排列。主要属性包括： - `flex-direction`：设置主轴方向，如`row`或`column`。 - `justify-content`：设置主轴上子元素的对齐方式，如`flex-...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
weixin_55846296的博客
01-11 2592
前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。单位含义vw相对于视窗的宽度，视窗宽度是100vwvh相对于视窗的高度，视窗高度是100vhvmin。
【移动web】Flex布局模型、移动适配、响应式网页
zilin_taku的博客
07-28 374
flex布局/弹性布局-是一种浏览器提倡的布局模型-布局网页更简单、灵活-避免浮动脱标的问题。
lib-flexible实现pc/移动端响应式布局？
PSQ_family的博客
01-25 850
1.下载 cnpm intsall --save lib-flexible 2.全局引用 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' //引用flexible import "lib-flexible/flexible.js" createApp(App).use(store).use(router).moun
流式布局、响应式布局、弹性布局等概念和区别
weixin_39580806的博客
10-16 5080
静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法： 　　PC：居中布局，所...
前端技术—11. 响应式布局
不放手，不错过的博客
08-03 172
响应式布局基本学习：BootStrap使用
95后讲前端——现目前流行布局的概念和区别
PrinceMe1的博客
10-20 223
一、静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： 　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮
前端总结Day17、移动端页面布局
zxpmoxo的博客
10-25 209
日常笔记
流式布局和响应式布局的区别
08-12
流式布局和响应式布局是两种常见的网页布局方式，它们有以下区别： 1. 定义： - 流式布局：流式布局是根据浏览器窗口大小自动调整元素的宽度，使其适应不同屏幕尺寸。它通常使用百分比来设置元素的宽度，以便随着窗口大小的变化而自动调整。 - 响应式布局：响应式布局是根据不同设备的屏幕尺寸和特性，使用不同的布局方式和样式，以提供更好的用户体验。它可以通过媒体查询、弹性盒子布局（Flexbox）和网格布局（Grid）等技术来实现。 2. 设计思路： - 流式布局：流式布局主要关注页面元素在不同屏幕尺寸下的自动调整，以确保内容的可读性和可用性。它适用于那些希望在不同设备上保持类似外观和排列的网站。 - 响应式布局：响应式布局更加灵活和自适应，它可以根据设备的屏幕大小和特性，重新排列、隐藏或显示页面元素，以提供更好的用户体验。它适用于那些希望在不同设备上呈现不同布局和功能的网站。 3. 实现方式： - 流式布局：流式布局主要通过设置元素的百分比宽度来实现，例如使用`width: 100%`来使元素占据父容器的100%宽度。这样，当浏览器窗口缩放时，元素的宽度会自动调整。 - 响应式布局：响应式布局可以通过使用媒体查询来针对不同的设备尺寸应用不同的CSS样式。媒体查询可以根据设备的宽度、高度、屏幕方向等条件来选择应用哪些样式。此外，弹性盒子布局（Flexbox）和网格布局（Grid）也常用于实现响应式布局。 总的来说，流式布局主要关注元素在不同屏幕尺寸下的自动调整，而响应式布局则更加灵活，可以根据设备的屏幕大小和特性提供不同的布局和功能。响应式布局通常需要使用媒体查询和其他技术来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AnswerCoder

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值