前言
春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq)。总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局、PC和移动端适配方案的选择以及一些问题。本文部分文案由chat-gpt编写,例如介绍响应式布局的文案(才不是因为我懒~)。
响应式布局
响应式布局是指在不同的设备或屏幕大小下,网页能够自动适配并呈现出最佳的视觉效果和用户体验。这是一种以屏幕大小和设备特性为基础的设计方法,旨在确保网站能够在各种不同设备上都能够完美呈现。这样,无论是在大屏幕电脑、笔记本电脑、平板电脑还是手机上访问网站都能够得到良好的体验。
总结了一下,网上目前有以下几种方案:
- 媒体查询
- flex布局
- rem
- 百分比
- vw/vh
- 移动端 viewport
- 开发PC端和移动端两套页面
在实习的时候我做过两个项目,是使用了媒体查询和rem的,效果还可以,我会着重介绍这两个方案。
@media媒体查询
关于媒体查询的详细介绍和使用方法:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries
讲大白话就是在符合条件的情况下,特定的样式会生效,下面是一个例子:
.test {width: 80px;height: 80px;background: #ccc;}@media screen and (min-width:600px){.test {width: 100px;height: 100px;}}
这个效果就是在屏幕宽度小于600px的时候,test类中的高度和宽度都是80px,而在大于等于600px的时候变成了100px,注意这里背景颜色还是原来的灰色,样式只是叠加了,并不是直接替换掉。
看到这里你应该就懂了,电脑、平板和手机各写一套不就行了,确实如此,这么做可以满足大部分的用户。
但也有许多问题,比如写三套就够折磨人了,而且由于市面上手机、电脑和平板屏幕宽度都不太一样,写三套只能满足大部分的用户,一些用户屏幕尺寸比较刁钻的(例如尺寸在手机和平板分割点边缘的),显示的效果就不是很好了。
flex布局
flex布局是一种CSS 3的新的布局方式,可以轻松的实现弹性布局。它的主要思想是通过容器和子项之间的关系来实现网页布局。和传统的布局方式相比,flex布局有很多优点,比如可以快速设置元素的大小、位置、对齐等属性,还可以自适应不同尺寸的屏幕和设备,从而实现更好的响应式布局。
使用flex布局,需要对容器设置display: flex属性。
然后使用flex-direction属性来设置子项的方向(水平或垂直)。flex-wrap属性则用于控制子项是否可以换行,align-items属性用于控制子项在交叉轴上的对齐方式,justify-content属性用于控制子项在主轴上的对齐方式。通过这些属性的设置,我们可以轻松的实现各种布局效果,同时也可以在响应式布局中实现更好的适应性。
个人感觉flex布局比较适合一些页面比较简单的页面,在PC和移动端都有不错的体验。
rem
rem布局是一种响应式布局方式,用于将屏幕尺寸和设备DPI等因素考虑在内,让页面能够在不同的设备上自适应调整布局,在各种尺寸和密度的屏幕上呈现出更好的视觉体验,主要用在移动端上面。
rem是根据根元素(也就是html标签)上的font-size来决定的,例如默认html的font-size为16px,那么1rem就相当于16px,也就是倍数的关系。那么当屏幕宽度不一样的时候,我们就需要动态修改html上的font-size来达到设配的效果。
动态修改有几种方案,第一种是通过媒体查询来修改:
@media screen and (min-width: 320px) {html {font-size: 21.33333333px;}}@media screen and (min-width: 360px) {html {font-size: 24px;}}@media screen and (min-width: 375px) {html {font-size: 25px;}}@media screen and (min-width: 384px) {html {font-size: 25.6px;}}@media screen and (min-width: 400px) {html {font-size: 26.66666667px;}}@media screen and (min-width: 414px) {html {font-size: 27.6px;}}@media screen and (min-width: 424px) {html {font-size: 28.26666667px;}}@media screen and (min-width: 480px) {html {font-size: 32px;}}@media screen and (min-width: 540px) {html {font-size: 36px;}}@media screen and (min-width: 720px) {html {font-size: 48px;}}@media screen and (min-width: 750px) {html {font-size: 50px;}
还有一种方法是通过js来动态修改:
function remSize(){var deviceWidth = document.documentElement.clientWidth || window.innerWidth; //兼容多浏览器//限制宽度if(deviceWidth >= 750){deviceWidth = 750}if(deviceWidth <= 320){deviceWidth = 320}/*为什么除以7.5呢?是因为结果比较好计算,这也是可以根据设计稿的宽度来决定的。例如设计稿宽度是750px,那么将html的font-size设置成750/7.5=100px,那么1rem就相当于100px。当屏幕宽度不同的时候,也可以达到自适应的效果。*/document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'document.querySelector('body').style.fontSize = 0.16 + 'rem' //相当于16px}remSize()//调整窗口大小时调用函数window.onresize = ()=> remSize()
通过以上操作,在css文件中就可以使用rem单位了,在不同的环境下也都有着不错的效果和体验。
当然自己手写的还是比较粗糙,现在比较成熟和流行的方案有淘宝的flexible.js,我们可以下载源码到自己的项目里面使用,原理和上面例子差不多,这里就不过多赘述。
如果你还是想用px,懒得自己计算rem,那也可以通过插件来解决,例如在vue项目中,通过安装postcss-px2rem
这个插件,然后在vue.config.js中设置参数就可以了:
module.exports = {// 适配css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({remUnit: 75// 1rem为75px,意思是在750的设计稿下,把屏幕切成10份,那么一份就是75了。那么在其他宽度的设计稿下也是按照这个比率来计算,达到适配。})]}}},... }
然后在css文件中你就可以继续愉快的使用px了。
但这个方法也存在着缺陷,例如项目中某些样式是通过实时计算的px值得到的,这些值就不能换算成rem了。
百分比
就如同字面一样,用百分比来设置高度,宽度,margin和padding等属性。但缺点在于他们参考的元素并不是统一的。例如width和height会参考父元素的width和height,但margin和padding参考的是父元素的width,而圆角百分比是参考自身的,因为这些原因很可能出现问题,所以不推荐单独使用。
移动端 viewport
Viewport(视口)是一个设备独立像素的抽象概念,它是浏览器上下文中的一个可视化区域。Viewport 的大小随着设备的屏幕大小而变化,而且无法通过 JavaScript 直接获取其准确值。Viewport在响应式网页设计方案中非常重要,在移动设备上尤为关键,因为移动设备通常会有不同大小的屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />width=device-width: 自适应手机屏幕的尺寸宽度maximum-scale: 缩放比例的最大值minimum-scale: 缩放比例的最小值inital-scale: 缩放的初始化user-scalable: 用户是否能缩放页面
vw/vh
使用vw和vh适配是一种比较新的响应式布局技术,用于自适应不同尺寸屏幕和设备。vw和vh是视窗宽度和高度的相对单位,使用vw和vh单位可以使元素在不同尺寸的屏幕上自适应调整大小和位置,从而实现更好的布局效果。
使用viewport meta标签在HTML文件中设置视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用vw单位代替固定值的宽度,例如:width: 50vw;
使用vh单位代替固定值的高度,在实际应用中可结合媒体查询等技术进行适配,例如:
height: 50vh;@media (max-width: 768px) {height: 100vh;}
需要注意的是,由于视窗的宽高比例可能与实际屏幕比例不一致,因此在设置元素大小和位置时,最好使用相对定位和百分比来实现。此外,vw和vh单位在一些低版本浏览器中可能无法支持,需要进行兼容处理。
开发PC端和移动端两套页面
如果PC和移动端的页面差异太大的话,也是可以选择开发两套页面的。
总结
总之,个人感觉没有完美的适配方案,只能根据自己的需求来选择,尽量达到理想的状态。也不一定只选择一种方案,可以结合多种方案来实现效果。
如果上述内容有任何问题,欢迎留言讨论。
参考链接:https://blog.csdn.net/LOxia/article/details/123723334
https://juejin.cn/post/7035540378811891749