前端自适应方法集

黔肆就是我

已于 2024-05-22 15:27:24 修改

阅读量174

点赞数 5

分类专栏：浏览器文章标签：前端

于 2024-05-21 16:27:47 首次发布

本文链接：https://blog.csdn.net/weixin_43823765/article/details/139087646

版权

浏览器专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端如何完成自适应

思想
rem、vw、vh
css媒体查询
Tips

思想

基本原则是，布局中更多的使用flex，尺寸上使用rem,vw,vh为单位，在不同分辨率，长宽比的不同设备上表现良好。
还有另一层意思是在不同设备上能够展现出针对其相适应的不同css样式。

rem、vw、vh

rem:以html字体大小为1rem的大小，一般html为16px，使用rem之所以能自适应是因为其算法如下：
$html字体大小_{实际} = （ \frac{js获取到当前设备宽度 }{设计图宽度}）*设计图宽度下1rem的大小$
也就是说他会等比例的缩放你当初设定的大小以适应其他宽度的屏幕，所以在js比较靠前的地方你应该有这样一段相似的逻辑去预设字体大小：

<script>
 //若屏幕最宽为750px时,我想将1rem定为50px：
 let width = Math.min(document.body.clientWidth,750);
 let fontSize = (width/750)*50
 document.documentElement.style.fontSize=fontSize+'px'
 
 //△ 页面resize时需要重新执行一次以上逻辑，设定1rem
 document.body.onresize=()=>{ ...}
</script>

1vw：长度为1%屏幕宽度
1vh：长度为1%屏幕高度，适宜做全屏应用
百分比：是对父元素的百分比取值，除非一路设置宽度否则会比较混乱不清

对比：

rem vs vw：两个方案都可以控制盒子大小，都可以根据屏幕宽度灵活调整。
1.如果你的移动项目还需要web端浏览，而你又没有专门为web设计另一套样式，那么rem会比vw体验更好；
2.如果页面在打开后可能会变化窗体大小，rem在使用时需要加入刷新屏幕resize的监听△（在resize时重新执行一下设定1rem实际大小的逻辑），而vw不用

[more about above]

css媒体查询

媒体查询是css具有的一项功能，通过@media可以完成对于当前浏览器端的媒体情况进行获取。
比如@media print设置屏幕打印的样式
比如@media screen根据屏幕大小调整样式

/* 宽度小于750时 */
@media screen and (max-width: 750px) {
  html {
    font-size: 30px ;
  }
}

/* 设备横向时（width > height） */
@media screen and (orientation: landscape){
  html {
    background-color:yellow;
  }
}

语法：

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

顺带贴一个@media print，是用于设置打印弹出框的样式，包括打印预览

@media print {
    @page {
        size: auto;
        /* //页面大小自动，防止打印版不全 */
        margin: 5mm;
        /* //页面边距的设定 */
    }
    .noprint {
        /* 不需要打印的元素 */
        display: none;
    }
    html,
    body,
    #app {
        background-color: goldenrod;
        height: auto !important;
        margin: 0px;
        border: none;
    }
    .pageBreak {
        /* 插入分页符，两种方法选择 */
        /* page-break-after: always; */
        page-break-before: always;
    }
    .card::before {
        /* 利用伪类添加表头等 */
        content: '表头';
        font-size: 20px;
        display: block;
        text-align: center;
        font-weight: bold;
        line-height: 40px;
    }
}

only：媒体类型前可以用only表仅在条件生效时设置样式，是为了让老版浏览器识别更好，不至于忽略后续的条件

more about @media:
如果需要改变的样式较多，可以直接分开写成多个css文件,在html中分别引入，根据media类型去选择是否引入：

<head>
	<link rel='stylesheet' media="screen and (min-width:500px)" href='./css/device.css' />
	<link rel='stylesheet' media="screen and (max-width:500px)" href='./css/smartdevice.css' />
</head>

这样可以分别完成平板，手机，电脑，大屏设备的样式，甚至可以不同布局，浏览器根据对应情况自动选用。

Tips

图片展示的处理：
防止图片变形，图片可以设置定宽不定高，但这样如果屏幕跨度过大，可能会导致图片很大，可以通过设置最大宽度解决。
img标签图片或者背景图可以通过设置contain类型的填充方式保持长宽比。

img{
	object-fit: contain;
}
btn{
	background-size: contain;
}

全屏应用
有终端机或者大屏可视化这样的项目，界面都是要求全屏填满的，此时使用f11切换全屏只会引起高度变化，建议使用vh单位做高度，而非rem和vw。

黔肆就是我

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端自适应方法集

前端自适应方法集
复制链接

扫一扫

专栏目录