【CSS】多行文字保持垂直居中，移动端布局

原创已于 2023-10-14 18:54:12 修改 · 627 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #css3

于 2022-12-12 17:03:24 首次发布

CSS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了多种实现多行文字垂直居中的CSS方法，并详细探讨了移动端布局的关键技术，包括viewport元标签的使用、响应式设计策略及不同单位（如rem、vw）的应用技巧。

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

文章目录

多行文字垂直居中
移动端布局

多行文字垂直居中

方法一

span{
  display:inline-block;
  line-height:normal;
  vertical-align:middle;
}

div{
height: 200px;
line-height:200px;}

方法2

通过一个伪元素，将高度拉长，然后宽度设置为0，

span{
  font-size:16px;
  display:inline-block;
  vertical-align:middle;
}

div{
height: 200px;
  font-size:0;
}

div:before{
content:'';
display:inline-block;
height: 100%;
width: 0px;
vertical-align:middle;}

方法3

通过flex，在flex中匿名文本也相当于被一个元素所包裹

section{
  display:flex;
  height: 200px;
  align-items:center;
}

方法四

可以通过table-cell实现

.outer3{
  /*表单元格不能有margin*/
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.inner3{
  width: 50px;
  height: 50px;
}

移动端布局

标尺图片中的一个像素，就是对应窗口的一个像素(也叫做一个css像素)
移动端布局和桌面端布局有很大的不同，pc上屏幕都足够大，但手机尺寸及分辨率都各不相同，且物理尺寸很小，于是就造成了在pc和手机上完全的不同策略，在pc上一般都是定宽居中，而且这个定宽是比一般电脑的显示器要小，主体区域不管在哪个电脑上都是一样的大小，只是留白不一样。
手机上的布局都不是这样的，手机的屏幕比较小，没有空间用来留白。所以手机网页或app都是占满手机宽度的。手机上也没有窗口的概念。一般app都是占满全屏的。而且手机屏幕物理尺寸各不相同，分辨率也各不相同（一般是1080的）。
当手机屏幕就是整个浏览器窗口的时候，它的CSS像素宽度是350css像素左右。
不同的电脑在浏览器全屏的时候，视口的css尺寸也是不一样的。但是在电脑上，视口大小都是足够大的。所以我们才能定宽设计，因为设计的宽度往往是小于屏幕宽度的。
由于手机物理像素的大小都非常小，所以手机网页代码中的1px往往不是手机屏幕的一个物理像素。为了编码习惯，一般厂商是将手机浏览器的视口宽度设置为相同物理尺寸下电脑显示器的像素数量：手机屏幕一般是6cm宽左右，而普通的电脑显示器6cm宽一般是300像素左右，再考虑手机离人很近，所以一般将视口大小设置成350css像素左右，但是也有浮动的，跟厂商以及手机的物理尺寸有关，一般在300-500之间，即不同型号的手机视口宽度不一样。但是，我们又希望我们的网页，能占满宽度

viewport标签

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

当页面没有声明这个标时，因为历史遗留原因，手机浏览器会认为这是为电脑设计的网页，所以会用电脑上典型的浏览器窗口来渲染页面，980px，也就是所说的布局视口
当页面声明这个标签时，手机浏览器会认为这个页面是为移动端设计的，所以会按照声明来,只被手机浏览器识别，不被电脑浏览器识别。
作用是设定手机浏览器使用多宽的窗口来渲染页面。
width=device-width，这个就是用来设定手机浏览器窗口宽度的，也就是设置布局视口，可以为数字，如果为数字，那么就固定浏览器窗口的大小在任何手机上都是一样的，也可以为一个预置值：device-width(设备宽度)，device-width就是为出厂设定的，不同手机不一样，一般屏幕的物理尺寸越大，它越大。当它为数字时，也就是说，开发者可以通过这个标签将所有手机浏览器的视口宽度设置为相同的。但是，比较旧的手机（安卓5.0以下），不能将该值设置为数字，而只能写device-width。
initial-scale=1.0,这个是初始放大倍数。
user-scalable,这个属性是设置用户是否能够缩放当前页面，默认为yes，可以设置为no
有的浏览器会忽略用户是否能够缩放的属性，这时候我们需要设置，minimum-scale=1.0,maximum-scal=1.0，这两个属性分别是设置最大缩放比例和最小缩放比例，都设置成1.0后，就和user-scalable=no的作用相同了

移动端适配方案

1.百分比设置：但是不同属性的百分比值，相对的是不同的参照物，使用起来非常不便，因此pass掉
2.rem单位+动态html的font-size
3.vw单位
4.flex的弹性布局（flex：1）

动态修改html的font-size的三种方案

在这里插入图片描述

rem的单位换算

方案一：手动换算
方案二：postcss-pxtorem，这个是webpack工具打包进行换算
方案三：VSCode插件：px to rem，在编写时自动转化

vw方案

因为vw就是根据视口宽度，1vw=视口宽度的百分之一，而上面用的1rem是视口宽度的10分之1，所以1rem = 10vw

在这里插入图片描述

典型的手机网页设计

一种是类似手机软件一样，等比例的设计，在不同的手机上，按钮大小不一样，但整体布局比例一样。例子:小米移动端首页，如果设备支持，那么设计图有多宽，content=就等于多宽，这样依赖，相当于开发者面对的手机都有相同的浏览器窗口，直接用量出来的尺寸加上px单位就可以了，如果设备不支持，content写为数值，则可以使用vw开发，先将设计图缩放为宽度1000，然后量出设计图中354像素时，就在代码中写35.4vw，所有的长度单位都使用vw，包括字号，边框等等，但是此方法的问题是，对设计图进行了缩放，图片内的一些边缘会发糊，导致测量尺寸不准。
我们希望，即不对设计搞进行缩放，也能够直接测量出来的尺寸直接用在代码里，即假设设计稿的宽度为x，那么我们希望x（rem） = 屏幕宽度=100vw，即html{font-size:100vw/x}，又由于100vw / x后的结果可能很小，小于1px，有些浏览器会限制最小字号(谷歌浏览器12px)，所以要乘上100倍。这样我们就不用缩放设计图，而是直接使用从设计图里测量出来的尺寸，加上rem单位即可。在不支持vw或calc的浏览器上，通过js读到窗口宽度的px单位，除以X * 100，设置到html的字号上就行了（小米商城就是这么做的）。
注意，如果设置了rem单位，那么会使幽灵字符变大，从而导致布局上的混乱，我们可以通过把body的font-size设置为initial，从而解决
另一种是，像pc上的流式布局一样，内容更多是以文字为主，没有太多需要保持比例的布局的网站。例子：github，这种布局直接写content=device-width即可，然后使用常规块元素布局，配合media quary，px为单位开发即可。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    *{
  background-color: rgba(0,0,0,0.08);
  box-shadow:inset 0 0 1px red;
}
html{
  font-size:calc(100vw /750 *100);
}
body{
  margin: 0;
}
div{
  width: 7.50rem;
  height:3rem;
}

main{
  width: 7.5rem;
}
section:first-child{
  margin-right:0.5rem;
}
section{
  
  width: 3.5rem;
  height: 3.5rem;
  float:left;
}
  </style>
</head>
<body>
<div></div>
<main>
  <section></section>
  <section></section>
</main>
</body>
</html>