Chiriri's blog
Iekr
2021-11-26
目录

移动布局

# 移动布局

# 视口 viewport

# 布局视口 layout viewport

布局视口分辨率设置为 980px, 但一般元素很小，可以通过手动缩放网页

为了显示可以完整的显示在页面中，对整个页面进行缩小；

我们相对于 980px 布局的这个视口，称之为布局视口（layout viewport）；

# 视觉视口 visual viewport

如果默认情况下，我们按照 980px 显示内容，那么右侧有一部分区域就会无法显示，所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中；

那么显示在可见区域的这个视口，就是视觉视口（visual viewport）

image-20240311103958001

我们可以通过缩放来操作视觉视口，但不会影响布局视口

# 理想视口 ideal viewport

默认情况下的 layout viewport 并不适合我们进行布局；我们可以对 layout viewport 进行宽度和缩放的设置，以满足正常在一个移动端窗口的布局；

通过 meta 视口标签，告知网页，设备有多宽网页有多宽

image-20240311104031027

# meta 视口标签

 <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,user-scalable=no,maxium-scale=1.0,minimum-scale=1.0"
    />
1
2
3
4
  • width: 宽度设置是 viewport 宽度，特殊值为 device-width 宽度为设备宽度
  • initial-scale: 初始缩放比 大于 0 的值
  • maximum-scale: 最大缩放比 默认为 1
  • minimum-scale: 最小缩放比 默认为 1
  • user-scaleable: 用户是否可以缩放，yes 或 no (1 或 0)

# 二倍图

pc 端 1px 为 1 个物理像素

而手机一般都为 1px 为 2 个物理像素

一般移动端都给一个 2X 再给一个 1 倍的盒子装

# 背景缩放 background-size

background-size: 背景图片的宽度 高度；

  • 如只写一个参数会等比例缩放
  • <percentage>：里面可以写百分百，相当于父盒子的尺寸
  • auto：默认值，以背景图本身大小显示
  • cover: 把图扩展到足够大直到填满盒子，等比缩放，会丢失部分图像
  • contain: 拉伸到高或宽直到填满高或宽就停止拉伸，可能会有部分空白图像无法填充
  • length：具体的大小，比如 100px
  • 移动端的 2X 图一般用一个 1X 的盒子装，缩小到 1X 放置到背景

# 移动端 CSS 初始化

http://necolas.github.io/normalize.css/

# CSS3 盒子模型 box-sizing

box-sizing 用来设置盒子模型中宽高的行为

  • content-box： padding、border 都布置在 width、height 外边
  • border-box： padding、border 都布置在 width、height 里边

# content-box

image-20240311083448096

  • 元素的实际占用宽度 = border + padding + width
  • 元素的实际占用高度 = border + padding + height

传统盒子 = width +border +padding 的值

# border-box

box-sizing:border-box; 把传统盒子转为 CSS3 盒子

CSS3 盒子 = padding 和 border 不会影响盒子大小

image-20240311083659648

  • 元素的实际占用宽度 = width
  • 元素的实际占用高度 = height

IE 盒子模型（IE8 以下浏览器）

image-20240311083736233

# 移动端特殊样式

如：移动端转为 css3 模型

box-sizing:border-box;

-webkit-box-sizing:border-box;

a 标准在移动端点击会有高亮提示，我需要清除

-webkit-tap-highlight-color:transparent;

清除 ios 的按钮样式

-webkit-appearance:none;

禁止长按弹出菜单

img,a {

​ -webkit-touch-callout:none;

}

# 移动端技术选型

  • 单独制作移动端页面
    • 流式布局 (百分百布局)
      • max-width: 最大宽度 或 max-height
      • min-width: 最小宽度 或 min-height
    • flex 弹性布局
    • less+rem + 媒体查询布局
    • 混合布局
  • 响应式页面兼容移动端
    • 媒体查询
    • botstarp

# flex 布局

Flexbox 翻译为弹性盒子:

  • 弹性盒子是一种用于按行或按列布局元素的一维布局方法；
  • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间；
  • 通常我们使用 Flexbox 来进行布局的方案称之为 flex 布局 (flex layout);

开启了 flex 布局的元素叫 flex container

image-20240311093032393

flex container 里面的直接子元素叫做 flex item

image-20240311093040694

  • 当父盒子设为 flex 布局后， 子元素的 float、clear 和 vertical-align 属性失效
  • flex item 的布局将受 flex container 属性的设置来进行控制和布局；
  • flex item 不再严格区分块级元素和行内级元素；
  • flex item 默认情况下是包裹内容的，但是可以设置

image-20240311093214530

通过给父盒子添加 flex 属性 来控制子盒子的位置和排列方式

# 父项属性

应用在 flex container 上的 CSS 属性

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

# flex-direction: 设置主轴的方向

flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布

  • flex-direction 决定了 main axis 的方向，有 4 个取值
  • row（默认值）、row-reverse、column、column-reverse

image-20240311093341070

image-20211126100203454

主轴与侧轴 x 轴和 y 轴

  • row:(默认值) 从左到右 默认主轴为 x 侧轴为 y 子元素是跟着主轴来排列的

    • display: flex;
flex-direction: row;
      1
      2

  • row-reverse: 从右到左

  • column: 从上到下 主轴为 y 侧轴为 x

    • display: flex;
flex-direction: column; /* 将主轴设置为y轴 元素从上到下排列 */
      1
      2

  • column-revers: 从下到上

# justify-content 设置主轴上的子元素排列方式

justify-content 决定了 flex items 在 main axis 上的对齐方式

使用这个属性前一定要确认好主轴是哪个

  • flex-start:(默认值) 从头部开始排列 如果主轴是 x 轴，则从左到右 image-20240311093558445

  • flex-end: 从尾部开始排列 image-20240311093605420

  • center: 在主轴居中对齐 (如果主轴 x 轴则是水平居中) image-20240311093613547

  • space-around: 平分剩余空间，flex items 之间的距离相等， flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

    • display: flex;
justify-content: space-around; /* 将父盒子平均切分给n个子盒子的空间 */
      1
      2

      image-20240311093637712

  • space-between: 先两边贴边 再平分剩余空间，flex items 之间的距离相等，与 main start、main end 两端对齐 image-20240311093732001

  • space-evenly： flex items 之间的距离相等，flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离 image-20240311093751920

# flex-wrap: 设置子元素是否换行

flex-wrap 决定了 flex container 是单行还是多行

默认情况下，项目都是在轴线上。由 flex-wrap 定义，默认不换行，如果装不开， 会缩小 子元素宽度，加入到轴线上排列

  • nowarp:(默认值) 不换行

  • warp: 换行，当父盒子装不下后，自动换行

    • display: flex;
flex-wrap: wawrp; /* 子元素需要先设置大小才会换行 不然会自动分配大小 */
      1
      2

  • wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

image-20240311093458915

# align-items: 设置侧轴上的子元素排列方式 (单行)

align-items 决定了 flex items 在 cross axis 上的对齐方式

  • normal：在弹性布局中，效果和 stretch 一样
  • flex-start: 默认值 从上到下，与 cross start 对齐
  • flex-end: 从下到上，与 cross end 对齐
  • center: 挤在一起居中 (垂直居中)
  • stretch: 拉伸 (子盒子不要给高度，不然没效果)，当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
  • baseline：与基准线对齐

image-20240311093901322

# align-content: 设置侧轴上的子元素的排列方式 (多行)

要配合 flex-wrap:warp 使用，不然 flex 项目无法多行排列

  • flex-start: 在侧轴的头到尾排列，与 cross start 对齐
  • flex-end: 尾到头排列，与 cross end 对齐
  • center: 在侧轴中间排列，居中对齐
  • space-around: 子项在侧轴平分剩余空间，flex items 之间的距离相等，flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
  • space-between: 子项在侧轴先在头和尾，再平分剩余空间，flex items 之间的距离相等，与 cross start、cross end 两端对齐
  • space-evenly：flex items 之间的距离相等，flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离
  • stretch: 设置子项元高度平分父元素高度（默认值）

image-20240311094059415

# flex-flow 简写属性

可以将设置主轴与是否换行进行简写

如:flex-flow: column warp;

# 子项属性

应用在 flex items 上的 CSS 属性

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

# flex 属性

flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定 1 个，2 个或 3 个值。

image-20240311094602352

单值语法：值必须为以下其中之一:

  • 一个无单位数 (<number>): 它会被当作 < flex-grow > 的值。
  • 一个有效的宽度 (width) 值：它会被当作 <flex-basis > 的值。
  • 关键字 none，auto 或 initial.

双值语法：第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。 第二个值必须为以下之一：

  • 一个无单位数：它会被当作 <flex-shrink> 的值。
  • 一个有效的宽度值：它会被当作 <flex-basis> 的值。

三值语法:

  • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
  • 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
  • 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。

定义子项分配剩余空间，占多少份

flex: n; 默认为 0 如:flex:2;

也可以写百分百 为父盒子大小的多少

如:flex:20%;

# align-self 控制子项自己在侧轴上的排列方式

让子项单独自己一个排列方式

继承侧轴上的排序方式属性

  • flex-start: 默认值 从上到下
  • flex-end: 从下到上
  • center: 挤在一起居中 (垂直居中)
  • stretch: 拉伸 (子盒子不要给高度，不然没效果)

# order 属性定义项目的排列顺序

order 决定了 flex items 的排布顺序，数值越小，排名越靠前，默认值为 0

order:n; 可以为负数 如:order:-1;

image-20240311094133821

# flex items

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items

  • auto（默认值）：遵从 flex container 的 align-items 设置
  • stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

image-20240311094233920

# flex-grow

flex-grow 决定了 flex items 如何扩展 (拉伸 / 成长)

  • 可以设置任意非负数字（正小数、正整数、0），默认值是 0
  • 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为： flex container 的剩余 size * flex-grow /sum

image-20240311094347154

flex items 扩展后的最终 size 不能超过 max-width\max-height

# flex-shrink

flex-shrink 决定了 flex items 如何收缩 (缩小)

  • 可以设置任意非负数字（正小数、正整数、0），默认值是 1
  • 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size 为 flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

flex items 收缩后的最终 size 不能小于 min-width\min-height

# flex-basis

flex-basis 用来设置 flex items 在 main axis 方向上的 base size

  • auto（默认值）、具体的宽度数值（100px）

决定 flex items 最终 base size 的因素，从优先级高到低

  • max-width\max-height\min-width\min-height
  • flex-basis
  • width\height
  • 内容本身的 size

# rem 布局

flex 缺陷：文字和高度无法自适应 因为是按父盒子切份来分配的 而 rem 可以更好自适应文字和高度

em 相对应父元素 的字体大小 来等比缩放 font-size =12 px; 10em =120px 1em =12px;

rem 相对应根元素 (html) 设置 font-size=12px ; 10rem=120px 1rem=12px

rem 的优点就是通过修改 html 里面的文字大小来

rem 配合媒体查询 修改 html 中 font-size 大小

# 媒体查询

@media 媒体类型 关键字 (媒体特征) {

​ CSS-Code;

}

  • 媒体类型
    • all: 用于所以设备
    • print: 用户打印和打印预览
    • screen: 用于电脑屏幕，平板电脑，智能手机等
    • speech：主要用于语音合成器。
  • 关键字
    • and: 可将多个媒体特性连接到一起
    • not: 排除某个媒体类型
    • onle: 指定某个媒体类型
    • , (逗号)：逗号用于将多个媒体查询合并为一个规则。
  • 媒体特性 image-20240311103253635
    • width: 页面可见宽度
    • min-width: 页面最小可见区域宽度
    • max-width: 最大可见区域宽度
@media screen and print (max-width:800px){
    body {
        /*当max-width小于等于800时 背景颜色为粉色*/
        background-color:pink;
        
    }
}
1
2
3
4
5
6
7

# rem 和结合媒体查询

rem 单位是跟着 html 变化的 媒体查询 + rem 就可以实现不同设备宽度 实现自适应

@media screen and (min-width:320px){
    html {
        font-size: 50px;
    }
}
@media screen and (min-width:640px){
    html {
        font-size: 100px;
    }
}
.div{
    height: 1rem;
    font-size: .5rem;
    background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# px 转 rem 插件

vscode 下载 px to rem & rpx (cssrem)

# 引入资源

当我们样式比较多 我们可以针对不同的设备使用不同的 css 文件

根据 link 中判断设备的尺寸 引用不同的 css 文件

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
1
2

# Less

Less 是 一门 css 扩展语言 是 CSS 的预处理器

常见的 CSS 预处理器: Sass Less Stylus

# Less 安装

node.js 环境下

先安装 node.js

npm install -g less
lessc -v
1
2

浏览器环境使用

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
1
2

# Less 变量

必须 @为前缀 不能包含特殊字符 不能以数字开头 大小写敏感

/* @变量名:值 */
@color: pink;
@font14: 14px;
body {
    background-color: @color; /* 使用变量 */
    font-size: @font14;
}
1
2
3
4
5
6
7

# Less 编译

我们需要把我们的 less 文件编译成 css 文件 才能在页面中使用

我们可以在 vscoe 中下载 Easy LESS 插件 保存 less 文件后自动生成 css 文件

# Less 嵌套

Less 中可以进行嵌套选择器 可以减少我们重复书写后代类选择器父类的名称

后代选择器

.div{
    width: 200px
        a{
            color: red;
            }
}
1
2
3
4
5
6

伪类 交集选择器 伪元素选择器 我们需要在前面加上 & 拼接

伪类选择器

a{
    color: red;
    &:hover{
        color: blue;
    }
}
1
2
3
4
5
6

伪元素

a{
    color: red;
    &::before{
        content: "";
    }
}
1
2
3
4
5
6

# Less 运算

任何数字 颜色 或 变量都可以参与四则运算

@font14: 14px;
body {
    background-color: #666 - #222;
    font-size:(@font14 + 5) / 2;
    width: 1.6rem + 5px; /* 如果两个数单位不相同 结果以第一数的单位为准  */
}
1
2
3
4
5
6

# 混合（Mixins）

在原来的 CSS 编写过程中，多个选择器中可能会有大量相同的代码，我们希望可以将这些代码进行抽取到一个独立的地方，任何选择器都可以进行复用；

混合（Mixin）是一种将一组属性从一个规则集（或混入）到另一个规则集的方法。

image-20240311103539340

混入也可以传入变量

image-20240311103601432

# 映射（Maps）

image-20240311103646300

混入和映射结合：混入也可以当做一个自定义函数来使用

image-20240311103655781

# extend 继承

和 mixins 作用类似，用于复用代码；和 mixins 相比，继承代码最终会转化成并集选择器

image-20240311103723018

# Less 内置函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。 内置函数手册：https://less.bootcss.com/functions/

# Less 导入其他 less

导入 common.less

@import 'common'
1

# 作用域（Scope）

在查找一个变量时，首先在本地查找变量和混合（mixins）；如果找不到，则从 “父” 级作用域继承；

编辑 (opens new window)
上次更新: 2025/01/01, 10:09:39
CSS3
Bootstrap

← Bootstrap→

最近更新
01
k8s
06-06
02
进程与线程
03-04
03
计算机操作系统概述
02-26
更多文章>
Theme by Vdoing | Copyright © 2022-2025 Iekr | Blog