⑩HTML+CSS 弹性盒及移动端页面简述

分手后的思念是犯贱 2023-07-21 06:22 3阅读 0赞

### 弹性盒和移动端相关问题 ###

*  弹性盒 ※
 *  弹性容器的样式 ※
 *  移动端问题
 *   *  像素
     *  视口（viewport）
     *  移动端页面
     *  响应式布局

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

# 弹性盒 ※ #

flex(弹性盒、伸缩盒)  
\- 是CSS中的又一种布局手段，它主要用来**代替浮动**来完成页面的布局  
\- flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

弹性容器  
\- 要使用弹性盒，必须先将一个元素设置为弹性容器  
\- 我们通过 `display` 来设置弹性容器  
`display:flex` 设置为块级弹性容器  
`display:inline-flex` 设置为行内的弹性容器

弹性元素  
\- 弹性容器的子元素是弹性元素（弹性项）  
\- 弹性元素可以同时是弹性容器

`flex-direction` 指定容器中弹性元素的排列方式  
可选值：  
row 默认值，弹性元素在容器中水平排列（主轴 自左向右）  
row-reverse 弹性元素在容器中反向水平排列（主轴 自右向左）  
column 弹性元素纵向排列（自上向下）  
column-reverse 弹性元素方向纵向排列（自下向上）

主轴：弹性元素的排列方向称为主轴  
侧轴：与主轴垂直方向的称为侧轴

`flex-grow` 指定弹性元素的伸展的系数（当父元素有多余空间的时，子元素如何伸展）  
`flex-shrink` 指定弹性元素的收缩系数（当父元素中的空间不足以容纳所有的子元素时，子元素如何伸展）

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>弹性盒</title>
        <style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 500px; border: 10px red solid; /* 将ul设置为弹性容器 */ display: flex; /* flex-direction 指定容器中弹性元素的排列方式 可选值： row 默认值，弹性元素在容器中水平排列（左向右） - 主轴 自左向右 row-reverse 弹性元素在容器中反向水平排列（右向左） - 主轴 自右向左 column 弹性元素纵向排列（自上向下） column-reverse 弹性元素方向纵向排列（自下向上） 主轴：弹性元素的排列方向称为主轴 侧轴：与主轴垂直方向的称为侧轴 */ flex-direction: row; } li{ width: 200px; height: 100px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; /* 弹性元素的属性： flex-grow 指定弹性元素的伸展的系数 - 当父元素有多余空间的时，子元素如何伸展 - 父元素的剩余空间，会按照比例进行分配 flex-shrink 指定弹性元素的收缩系数 - 当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩 */ flex-shrink: 0; } li:nth-child(1){ flex-grow: 0; flex-shrink: 1; } li:nth-child(2){ background-color: pink; flex-shrink: 2; } li:nth-child(3){ background-color: orange; flex-shrink: 3; } </style>
    </head>
    <body>
        
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
    </body>
    </html>

--------------------

# 弹性容器的样式 ※ #

`flex-wrap`: 设置弹性元素是否在弹性容器中自动换行  
可选值：  
nowrap 默认值，元素不会自动换行  
wrap 元素沿着辅轴方向自动换行  
wrap-reverse 元素沿着辅轴反方向换行

`flex-flow`: wrap 和 direction 的简写属性  
如：`flex-flow: row wrap;`

`justify-content`如何分配主轴上的空白空间（主轴上的元素如何排列）  
可选值：  
flex-start 元素沿着主轴起边排列  
flex-end 元素沿着主轴终边排列  
center 元素居中排列  
space-around 空白分布到元素两侧  
space-between 空白均匀分布到元素间  
space-evenly 空白分布到元素的单侧

例：

`align-items`元素在辅轴上如何对齐  
\- 元素间的关系可选值：  
stretch 默认值，将元素的长度设置为相同的值  
flex-start 元素不会拉伸，沿着辅轴起边对齐  
flex-end 沿着辅轴的终边对齐  
center 居中对齐  
baseline 基线对齐

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>弹性容器的样式</title>
        <style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 600px; height: 800px; border: 10px red solid; /* 设置ul为弹性容器 */ display: flex; /* flex-flow: wrap 和 direction 的简写属性 */ flex-flow: row wrap; justify-content: center; /* align-items: - 元素在辅轴上如何对齐 - 元素间的关系 - 可选值： stretch 默认值，将元素的长度设置为相同的值 flex-start 元素不会拉伸，沿着辅轴起边对齐 flex-end 沿着辅轴的终边对齐 center 居中对齐 baseline 基线对齐 */ align-items: center; /* align-content: 辅轴空白空间的分布 */ align-content: space-between; } li{ width: 200px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; flex-shrink: 0; } li:nth-child(1){ /* align-self: 用来覆盖当前弹性元素上的align-items */ /* align-self: stretch; */ } li:nth-child(2){ background-color: pink; } li:nth-child(3){ background-color: orange; } li:nth-child(4){ background-color: yellow; } li:nth-child(5){ background-color: chocolate; } </style>
    </head>
    <body>
         <ul>
             <li>1</li>
             <li>2
                <div>2</div>
             </li>
             <li>3
                 <div>3</div>
                 <div>3</div>
             </li>
             <li>4</li>
             <li>5
                 <div>5</div>
             </li>
         </ul>
    </body>
    </html>

`flex-basis` 指定的是元素在主轴上的基础长度  
如果主轴是 横向的 则 该值指定的就是元素的宽度  
如果主轴是 纵向的 则 该值指定的是就是元素的高度  
\- 默认值是 auto，表示参考元素自身的高度或宽度  
\- 如果传递了一个具体的数值，则以该值为准

`flex` 可以设置弹性元素所有的三个样式  
格式：flex 增长 缩减 基础;  
`initial` “flex: 0 1 auto”.  
`auto` “flex: 1 1 auto”  
`none` “flex: 0 0 auto” 弹性元素没有弹性  
如：`flex: initial;`

`order` 决定弹性元素的排列顺序

例：

--------------------

# 移动端问题 #

## 像素 ##

*  屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
 *  分辨率：1920 x 1080 说的就是屏幕中小点的数量
 *  在前端开发中像素要分成两种情况讨论：**CSS像素** 和 **物理像素**
 *  ①物理像素：上述所说的小点点就属于物理像素
 *  ②CSS像素：编写网页时，我们所用像素都是CSS像素
 *  浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
 *  一个css像素最终由几个物理像素显示，由浏览器决定：  
    默认情况下在pc端，一个css像素 = 一个物理像素

## 视口（viewport） ##

*  视口就是屏幕中用来显示网页的区域
 *  可以通过查看视口的大小，来观察CSS像素和物理像素的比值
 *  默认情况下：  
    视口宽度 1920px（CSS像素）  
    1920px（物理像素）  
    此时，css像素和物理像素的比是 1:1
 *  放大两倍的情况：  
    视口宽度 960px（CSS像素）  
    1920px（物理像素）  
    此时，css像素和物理像素的比是1:2
 *  我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

--------------------

## 移动端页面 ##

在不同的屏幕中，单位像素的大小是不同的。智能手机的像素点 远远小于 计算机的像素点

那么，假如现在有一个宽度为900px的网页，该如何在iphone6中显示呢？

默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。

所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验。  
为了解决这个问题，大部分网站都会专门为移动端设计网页。

**移动端默认的视口大小是980px**(css像素)，默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）。如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好的，导致网页中的内容非常非常的小。

所以，编写移动页面时，必须要确保有一个比较合理的像素比：  
1css像素 对应 2个物理像素 /  
1css像素 对应 3个物理像素

每一款移动设备在设计时，都会有一个最佳的像素比。一般我们只需要将像素比设置为该值即可得到一个最佳效果。将像素比设置为最佳像素比的视口大小我们称其为完美视口。

具体操作，通过meta标签来设置视口大小。将网页的视口设置为完美视口

`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

**结论：以后再写移动端的页面，就把上边这个先写上**

不同设备的完美视口的大小是不一样的：  
iphone6 – 375  
iphone6plus – 414

由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，  
比如在iphone6中 375就是全屏，而到了plus中375就会缺一块。

所以在移动端开发时，就不能再使用px来进行布局了

`vw` 表示的是视口的宽度（viewport width）  
\- 100vw = 一个视口的宽度  
\- 1vw = 1%视口宽度

vw这个单位永远相当于视口宽度进行计算

比如：设计图 750px。创建一个 48px x 35px 大小的元素

100vw = 750px(设计图的像素)  
那么：0.1333333333333333vw = 1px

6.4vw = 48px(设计图像素)  
4.667vw = 35px

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vw适配</title>
        <style> *{ margin: 0; padding: 0; } html{ /* 网页中字体大小最小是12px，不能设置一个比12像素还小的字体 如果我们设置了一个小于12px的字体，则字体自动设置为12 0.1333333vw = 1px 5.3333vw = 40px */ font-size: 5.3333vw; } .box1{ /* rem 相对于根元素的字体大小来计算 - 1 rem = 1 html的字体大小 - 1 rem = 40 px(设计图) */ width: 18.75rem; height: 0.875rem; background-color: #bfa; } </style>
    </head>
    <body>
         <div class="box1"></div>
    </body>
    </html>

--------------------

## 响应式布局 ##

*  网页可以根据不通的设备或窗口大小呈现出不同的效果
 *  使用响应式布局，可以使一个网页适用于所有设备
 *  响应布局的关键就是 媒体查询
 *  通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>响应式布局</title>
        <style> /* 使用媒体查询 语法： @media 查询规则{} 媒体类型： all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器 - 可以使用,连接多个媒体类型 可以在媒体类型前添加一个only，表示只有。 only的使用主要是为了兼容一些老版本浏览器 */ /* @media print,screen{ body{ background-color: #bfa; } } */ @media only screen { body{ background-color: #bfa; } } </style>
    </head>
    <body>
        
    </body>
    </html>

例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>媒体查询</title>
        <style> /* 媒体特性： width 视口的宽度 height 视口的高度 min-width 视口的最小宽度（视口大于指定宽度时生效） max-width 视口的最大宽度（视口小于指定宽度时生效） */ /* @media (max-width: 500px){ body{ background-color: #bfa; } } */ /* 样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化。 一般比较常用的断点： 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px */ @media only screen and (min-width: 500px) and (max-width:700px){ body{ background-color: #bfa; } } </style>
    </head>
    <body>
        
    </body>
    </html>