欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【css】移动端响应式布局与响应式字体大小

程序员文章站 2022-05-24 23:53:52
...

前言：移动设备（手机、平板电脑等），已经逐渐成为人们生活中必不可缺的物件了，这也意味着人们更多的用移动设备浏览网页。然而移动设备有着各式各样的分辨率与大小，这使用前端开发人员不得不去设配它们。

相关链接：【css】移动端自适应布局与字体大小自适应

前言二： 说到移动设备，一个不得不提就是viewport的设置了

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

其中：①、width=device-width：是设置可视区宽度等于设备宽度

          ②、initial-scale=1.0：初始化缩放比例

          ③、maximum-scale=1.0：最大可以放大的比例

          ④、minimum-scale=1.0：最小可以缩小的比例

          ⑤、user-scalable = 0： 是否允许用户缩放（1为true,0为false）

前言三： 说到移动设备，还有个不得不说的就是响应式了

html { font-size:100px; }
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } }		/*Android常用宽度*/
@media(max-width:414px){ html { font-size:64.69px; } }  /*i6Plus,i7Plus宽度*/  
@media(max-width:375px){ html { font-size:58.59px; } }	/*i6,i7宽度*/
@media(max-width:360px){ html { font-size:56.25px; } }	/*Android常用宽度*/
@media(max-width:320px){ html { font-size:50px; } }		/*i5宽度*/

代码中的效果：

当设备、浏览器宽度大小（小于等于）540px的时候，html的font-size就不再是100px，而是84.375px。

同样的当设备、浏览器宽度大小（小于等于）480px的时候，html的font-size就不再是84.375px，而是75px。

以此类推，我们可以根据不同的设备、浏览器宽度大小来设置不同的样式。这就是响应式了。

一、rem

rem是我个人比较喜欢用的一个计算单位了，rem是根据html的根元素标签的font-size的大小来计算的。（这也意味着，完全不用担心，设置父元素标签对子元素标签带来影响）。

rem用法：

<body>
<style>
html { font-size:100px; }
.testDiv { width:5rem; height:2.5rem; font-size:0.28rem; background:#ccc;}
</style>
<div class="testDiv">hello world</div>
</body>

【css】移动端响应式布局与响应式字体大小

我给html根元素设置了font-size为100px, 然后我给.testDiv设置了5rem(500px)的宽度、2.5rem(250px)的高度、0.28rem(28px)的字体大小。

（这不难看出来，rem就是与html根元素font-size字体大小相乘的计算单位）

如果我html根元素font-size字体大小是100px,  那5rem相当于5*100等于500px

如果我html根元素font-size字体大小是200px，那5rem相当于5*200等于1000px

（margin值，padding值都可以用rem设置）

移动端设配demo：

①、测试图片 : 测试图片的宽度为640px,高度为200px，字体为宋体，大小为28px.

【css】移动端响应式布局与响应式字体大小

①、代码

<!DOCTYPE html="en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>test</title>
<style>
html { font-size:100px; }
body { margin:0; }
.content { width:100%; max-width:640px; min-width:320px; margin:0 auto; }
.content img { width:100%; }
.testDiv { width:100%; height:2rem; line-height:2rem; font-size:.28rem;
font-family:"宋体"; font-weight:bold; text-align:center; background:#ccc; color:#fff; }

@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } }		/*Android常用宽度*/
@media(max-width:414px){ html { font-size:64.69px; } }  /*i6Plus,i7Plus宽度*/  
@media(max-width:375px){ html { font-size:58.59px; } }	/*i6,i7宽度*/
@media(max-width:360px){ html { font-size:56.25px; } }	/*Android常用宽度*/
@media(max-width:320px){ html { font-size:50px; } }		/*i5宽度*/
</style>
</head>

<body>
<div class="content">
	<div><img src="test.jpg"/></div>
    <div class="testDiv">hello world</div>
</div>
</body>
</html>

先运行代码：可以发现（灰色的，我们设置的.testDiv的大小跟字体大小就可以跟着 “测试图片”大小那样去改变了，实现了设配移动端的效果）。

【css】移动端响应式布局与响应式字体大小

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

【css】移动端响应式布局与响应式字体大小

这样我们只需在640px（640px是因为我这边的UI喜欢用640px的设计图，大家视情况改变）重构好页面效果，剩下的只需去修改各个分辨率下的html根元素的font-size大小了。那么问题来了，如何设置html根元素的font-size。

还是以640px为例子。100为html根元素的font-size起始大小

①、当设备宽度为375px，我们只需用375/640*100=58.59px;  这时设置的html元素的font-zise为58.59px;

①、当设备宽度为320px，我们只需用320/640*100=50px; 这时设置的html元素的font-zise为50px;

 

这里添加下rem的兼容效果

【css】移动端响应式布局与响应式字体大小

 

二、em

em的使用方法跟rem差不多，还是有一些区别。不同之处在于，em是根据标签元素自身的font-size来计算（宽高设置根据当前元素font-size），而元素自身的font-size又受他父级元素的font-size的影响，这很容易导致错误。而em计算单位的唯一优势就是它的兼容效果更佳。

问题①：父级元素干扰

<body>
<style>
html { font-size:100px; }
.content { font-size:0.5em;  }
.testDiv { width:5em; height:2.5em; background:#ccc; }
</style>
<div class="content" >
	<div class="testDiv" ></div>
</div>
</body>

页面效果

【css】移动端响应式布局与响应式字体大小

这时候.testDiv的宽度不再是500px；而是变成250px。因为.testDiv的父级.content的font-size变成了50px（0.5em）；所以这时候再给.testDiv设置5em的宽度变成了（50px*5=250px）；

问题②：自身元素设置字体干扰

<body>
<style>
html { font-size:100px; }
.testDiv { width:5em; height:2.5em; font-size:0.5em; background:#ccc; }
</style>

<div class="testDiv" ></div>
</body>

页面效果

【css】移动端响应式布局与响应式字体大小

这次不再是给.testDiv的父级设置字体大小，而是跟他本身设置了font-size(0.5em)；而.testDiv还是变成了250px。因为这时候计算单位已经根据元素自身的font-size的来计算的了。

 

em计算单位的唯一优势就是它的兼容效果了。

【css】移动端响应式布局与响应式字体大小

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

补充：设计图750px;常用配制

html { font-size:100px; font-family:'微软雅黑','苹方','思源黑体';  }  /*效果图750px*/
        @media(max-width:640px){ html { font-size:85.33px; } }  /*Android常用宽度*/
        @media(max-width:540px){ html { font-size:72px; } }     /*Android常用宽度*/
        @media(max-width:480px){ html { font-size:64px; } }     /*Android常用宽度*/
        @media(max-width:445px){ html { font-size:60px; } }
        @media(max-width:414px){ html { font-size:55.2px; } }   /*i6Plus,i7Plus宽度*/
        @media(max-width:375px){ html { font-size:50px; } }     /*i6,i7宽度*/
        @media(max-width:360px){ html { font-size:48px; } }     /*Android常用宽度*/
        @media(max-width:320px){ html { font-size:42.67px; } }    /*i5宽度*/

 

相关链接：【css】移动端自适应布局与字体大小自适应

相关标签： 响应式布局 移动端响应式布局 移动端设置响应式高度 移动端设置响应式字体 移动端自适应宽度，字体

上一篇： 普歌—智音团队 VScode 使用vw布局插件（实用）

下一篇： 命令行计算器

推荐阅读