CSS3有关响应式的原理学习过程

ATWLee

已于 2022-03-31 21:46:54 修改

阅读量610

点赞数

分类专栏： CSS 文章标签： css3 前端

于 2022-03-31 00:28:17 首次发布

本文链接：https://blog.csdn.net/BWater_monster/article/details/123860528

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、通过media query 和rem来进行响应式实现

原理：
1、media query媒体查询，通过判断不同的屏幕尺寸大小，来给html标签设置不同font-size
2、其他元素都采用rem控制大小，即可实现响应式的效果

缺点：
media query媒体查询设置多个不同的尺寸是一个范围，在当前范围内切换是没有响应式效果，在切换到另一个范围的瞬间时，会明显有一个卡顿的感觉。

代码：

// 常见的媒体查询尺寸（常用的手机尺寸）：
// less
// 设计稿划分为10等份（750px的设计稿，一份就是75px了，375px的设计稿，一份就是37.5px，其它同理）
@divide:10
@media (min-width:320px){
	html{
		font-size: 320px / @divide
	}
}
@media (min-width:360px){
	html{
		font-size: 360px / @divide
	}
}
@media (min-width:375px){
	html{
		font-size: 375px / @divide
	}
}
@media (min-width:400px){
	html{
		font-size: 400px / @divide
	}
}
@media (min-width:480px){
	html{
		font-size: 480px / @divide
	}
}
@media (min-width:540px){
	html{
		font-size: 540px / @divide
	}
}
@media (min-width:720px){
	html{
		font-size: 720px / @divide
	}
}
@media (min-width:750px){
	html{
		font-size: 750px / @divide
	}
}

//使用举例：750px的设计稿，里面有个宽高100px的盒子，外边距是75px
// 先计算一下，按照你定的几等份，一份是多少px。那这里就是750 / 10 = 75px
@baseFontSize:75
div{
	// 用设计稿上的尺寸除一份的尺寸，单位注意得是rem哦，这样就ok了
	width: 100rem / @baseFontSize;
	height: 100rem / @baseFontSize;
	margin: 75rem / @baseFontSize;
}

二、通过js和rem来进行响应式实现

还记得第一种的缺点吗，媒体查询设置的是尺寸的某个范围，在当前范围内的切换是不会有响应式效果的，而且范围切换的一瞬间会有个明显的卡顿效果。
那就多设几个范围？
NoNoNo，我可以用js去一直监听呀，然后动态的修改根元素Html标签的font-size值呀。

原理：
1、js动态监听页面尺寸变化，然后动态的修改html的font-size
2、其他元素都采用rem控制大小，实现响应式的效果

缺点：
多了js的代码，一直监听页面的尺寸变化浪费资源，而且和css有了耦合。

实现：
flexible：一个封装好的动态改变html的font-size的JS文件。GitHub地址
作者也说了：现在大部分主流浏览器已经支持vw的属性，咱第三个就说这个。所以这个flexible动态改变html的font-size已经不推荐了。

三、通过vw来进行响应式实现

随着越来越多的浏览器兼容vw单位，以上两种实现方式的缺点都已解决：不会有卡顿，也没有js。

原理：
1、可视窗口宽度为100vw，高度为100vh。
2、和第一种实现方式类似，第一种是分成了若干等份，计算元素占比，单位rem。而vw可以看成分成了100份，每一份是1vw。然后计算元素占比，单位vw。
3、其他元素都采用vw控制大小，即可实现响应式的效果

缺点：
如果屏幕很大或很小，视觉效果会很差，因为元素大小是根据视口宽度的改变而改变的。

代码：

// sass
// 设计稿的尺寸（以750px举例）
$vmBase:750
@function vw($px) {
    @return ($px / $vmBase) * 100vw;
}

// 宽高100px的盒子，75的外边距
div{
	width : vw(100);
	height: vw(100);
	margin: vw(75);
}

四、通过vw和rem进行响应式实现

为了解决第三种的缺点，通过rem的配合。

原理：
1、在第三种vw的基础上，通过vw的相关计算，给html一个动态的font-size（其实就是vw），其他元素不再使用vw单位，继续使用rem为单位
2、再给body设置一个最大最小限制，再限制一下html的font-size，这样其他元素也就有最大最小值了。

代码：

// 以750设计稿为例
$vwFontsize: 75; 
// 宽75px元素的=1rem
@function rem($px) {
    @return ($px / $vwFontsize) * 1rem;
}
html {
	// 在最小值最大值范围之间，一个动态的font-size（我选的是10vw）
	// **重点：这里是10vw，那对应上rem那个方法返回的就是*1rem,最大值最小值就是75px和32px;同理，如果是20v，那返回的是*0.5rem，最大值最小值就是150px和64px
    font-size: 10vw;
    // 限制根元素最大值，最小值
    @media screen and (max-width: 320px) {
        font-size: 32px;
    }
    @media screen and (min-width:750px) {
        font-size: 75px;
    }
}
body {
	// 一般手机就是320-750
    max-width: 750px;
    min-width: 320px;
    div{
    	width: rem(100);
    	height: rem(100);
    	margin: rem(75);
    }
}