CSS3--移动端自适应

最新推荐文章于 2025-11-16 17:33:46 发布

原创最新推荐文章于 2025-11-16 17:33:46 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css

css3 专栏收录该内容

10 篇文章

订阅专栏

CSS单位

CSS中，单位分为两类：

绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的；
相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。

CSS绝对单位：（绝对单位通常使用在打印方面）

CSS相对单位

CSS单位浏览器兼容性

在这里插入图片描述

CSS重要单位集合：

px像素Pixel，绝对长度单位，相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em简介：em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸16px。
em特点：① em的值并不是固定的②em会继承父级元素的字体大小
em默认计算方式：浏览器的默认字体大小都是16px，所以1em=16px，那么10px=0.625em
em继承性：em是一个相对的单位，是当前元素相对于当前对象字体的大小而言的；（例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px。如果父元素没有设置字体大小的话，就是想对于浏览器默认的字体大小而言的）如果父元素没有设置字体大小，则相对于浏览器默认字体大小而言的

rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
==%==一般宽泛的讲是相对于父元素

%一般宽泛的讲是相对于父元素，但是并不是十分准确，分为以下几种情况：
①对于普通定位元素就是我们理解的父元素
②对于position: absolute;的元素是相对于已定位的祖先级元素
③对于position: fixed;的元素是相对于ViewPort（可视窗口)

vw与vh视窗单位，vmax与vmin可以判断屏幕横竖屏
（了解即可） ex 和ch 单位，依赖于当前字体font-family 和字体大小 font-size。

ex 指当前字体环境中小写字母x 的高度；
ch 指当前字体环境中数字 0 的宽度。

普及知识点：
浏览器的默认字体大小：16px
chrome字体最小限制：12px
CSS单位分为绝对单位和相对单位

rem简介

什么是rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
看到rem会想起em单位，em（font size of the element）是指相对于当前对象内字体大小的单位。它们之间其实很相似，只不过rem宽高计算是依赖根元素字体大小，em是依赖当前对象或祖先的字体大小计算。

rem宽高转换

rem计算验证：
所谓依赖根元素来计算的方式，就是根据根元素html的font-size字体大小计算，然后所有的rem就根据这个font-size来计算。

因为浏览器默认字体大小为16px，则1rem=16px。如果想设置一个元素的宽高为100px，计算起来较为麻烦，所以一般做法为html {font-size: 62.5%;}
即将根元素字体大小缩为默认大小的62.5%，此时1rem=16px*62.5%=10px，也方便使用计算，如下所示

  <div class="demo"></div>

		.demo{
			width: 1rem;
			height: 1rem;
			background: red;
		}

在这里插入图片描述

问题：
·验证后发现chrome字体限制BUG，因为chrome限制最小字体为12px，所以此时无法将根元素字体大小的16px的62.5%缩为10px。
·即chrome下最小字体为12px，所以假如你设置html{font-size:62.5%} header{height:8rem} 那么在其他浏览器下 header的高度是80px，但是在chrome下是96px。
方案：
设置：html{font-size:625%} 这样子既便于计算，又不会产生这个问题.

此时再使用rem的话1rem=100px，如果想设置header元素高度为80px，则可以这样设置header{height:0.8rem;}

<header></header>

		html{
			font-size: 625%;
		}
		header{
			width: 100%;
			height: 0.6rem;
			background: red;
		}

在这里插入图片描述

rem字体转换

如果将html{font-size:625%;}后，宽高计算都没有问题，但字体会顶飞，变得特别大…

<div class="demo">顶部导航</div>

		html{
			font-size: 625%;
		}
		header{
			width: 100%;
			height: 0.6rem;
			background: red;
		}

在这里插入图片描述
rem字体过大解决方案：
重新定义body字体大小为font-size:0.16rem即可

	<header></header>
	<h1>文章标题</h1>

		html{
			font-size: 625%;
		}
		body{
			font-size: 0.16rem;
		}
		header{
			width: 100%;
			height: 0.6rem;
			background: red;
		}

在这里插入图片描述
验证后发现重定义body字体大小即可解决，且对其他标签默认字体大小及样式均无影响

rem面试常问：
设了html{font-size:62.5%}后就有1rem = 10px，为什么不直接设置html{font-size:10px}，如果设置10px，则1px也是=10px？
答案：
主要是兼容性和未来发展趋势的综合考虑，《响应式web设计实践》中提到过这一点，桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的，但是其他类型的设备的默认字体大小不一定是16px，特别是高分辨率的设备，16px大小的字体在他们上面看起来会非常小。所以不能在body上设置具体像素，设置成百分比，可以按照设备的基准字体大小给小编写的网页设置好最适合用户浏览的字体大小。

@media实现rem转换

怎么样在不同分辨率的情况下计算根元素需要的font-size的值，实现比例缩放，统一展示效果？
关于这个点，其实有两种解决方案，一种是基于CSS的情况，另外一种就要通过js计算获得。

怎么利用css做到基于不同的分辨率来定义呢？

首先想到的就是媒体查询。当基于媒体查询来做屏幕自适应时，首先要考虑下做哪些屏幕，做一下简单的列举，常见的屏幕分辨率的媒体查询：
在这里插入图片描述
除了以上列举几个，还有其他机型需要进行适配，所以由此可以看出利用CSS实现基于不同的分辨率来定义不同根元素字体大小，从而实现不同的rem大小有些麻烦。所以这种方法有一个弊端，需要计算每一个屏的基础值
所以开发中大多使用JS代码计算来根据屏幕宽度实现rem大小比例转换。

js实现rem转换

JS动态设置根元素字体大小
（1）获取根元素字体大小
document.documentElement.style.fontSize
（2）获取屏幕可视区域窗口宽度
document.documentElement.clientWidth
计算语法：
document.documentElement.style.fontSize
=
document.documentElement.clientWidth / 750*100 + ‘px’;
通过以上计算公式便可以实现在750px大小的设备中，1rem=50px
在这里插入图片描述

根元素字体大小font-size=(375/750)100+‘px’=50px
接下来改动机型再次测试，例如改为小一号的iPhone5，此时会发现宽高变为42.66，实现了根元素字体大小font-size跟随机型缩放效果。

接下来做下处理，一般在页面加载时自动执行js代码进行根元素字体大小计算，对js代码进一步修改如下
在这里插入图片描述
其他修改
另外，当控制台调试机型改动时（即resize窗口大小调整）、手机旋转页面时（即orientationchange用户水平或者垂直翻转设备，即方向发生变化）等…都需要重新计算
针对以上各种问题及情况，勤劳的程序猿们写了一个开源的解决方案flexible。

简介及原理：
flexible.js是一个开源的用于终端设备的适配解决方案，主要用于解决各种不同尺寸移动设备的大小自适应问题，其原理是通过移动设备的dpr（设备像素比=物理像素/设备独立像素）和屏幕宽度来动态改变html的font-size大小。
rem自适应js文件flexible.js：
通俗理解：
就是通过动态获取屏幕宽度控制根元素字体大小,进而控制页面大小比例。flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,就是一个终端设备适配的解决方案。也就是说它可以让你在不同的终端设备中实现页面适配。
用法：
在页面的中引入 flexible.js文件