阅读 166

前端自适应

image.png

自适应的方法有很多种,下面是目前掌握的三种方式:

方案一:vw、vh的方式(视口单位)

vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)如果设计稿为1920,那么10%就是192px vh:视窗高度的百分比, 一般设置body为height:100vh,则会占满整个屏幕。 vmin:当前 vw 和 vh 中较小的一个值 vmax:当前 vw 和 vh 中较大的一个值

 使echarts能够自适应,思路就是首先能让他显示出来,如果没有给它设置高度,那么它的高度则为0; 其次,如果直接给它设置固定的像素px值,则不会自适应。换个思路,我们可以给它的父级元素设置一个vh值,然后给图表设置height:100%。举个🌰,可以给它父级盒子设置30vh,像这样:

<div style="height:30vh;">
  <div id="main" style="height:100%;"></div>
</div>
复制代码

它会随着你视口高度的变化而变化,当然这种方式也有缺陷,就是如果视口宽度改变它会不会进行自适应,答案是不会。vw和vh只使用一种,要么让他宽度自适应,要么让他高度自适应,并且可以搭配rem的方式来进行字体大小的改变。再详细的我就不说啦,大家可以参考这一篇vw、vh使用详解或者这一篇点击这里 www.cnblogs.com/ranyonsue/p…

视口单位的用例:

(1)字体大小:

.title {
    font-size: 5vw;
}
//当宽度变的非常的小的时候,字体同时也会变的很小,
//据我所知,移动设备上的最小字体大小不应该不于14px。在GIF中,不小于10px。
.title { //需要为标题提供最小字体大小,可以使用 calc()
    font-size: calc(14px + 2vw);
}
//应该在某些断点上使用媒体查询并更改字体大小。避免屏幕过大字体变的很小
@media (min-width: 1800px) {
    .title {
        font-size: 40px;
    }
}
复制代码

(2)粘性布局(footer):

在大屏幕上,网站内容有时候很少,footer 没有粘在底部。这很正常,也不被认为是一种不好的做法。但是,还有改进的余地。考虑下面代表问题的示图:

image.png Flexbox和视口单位(推荐)--通过将100vh设置为body元素的高度,然后可以使用flexbox来使main元素占用剩余空间。

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{

main {
    /* This will make the main element take the remaining space dynamically */
    flex-grow: 1;
}
复制代码

这样,问题就解决了,无论内容长度如何,我们都有一个粘性footer。

image.png

方案二

使用postcss-px-to-viewport,可以将px单位自动转换成viewport单位,vw表示屏幕的1%。 考虑到本文的篇幅,这里不讲具体插件怎么配置了,但是会附上相关文章,可以参考vue-cli中使用postcss-px-to-viewport 将px转换成vw。 使用的效果是这样:

image.png

image.png

方案三

使用postcss-pxtorem:可以把px自动切换为rem,如果需要使用px的时候改成 Px 就可以生效 amfe-flexible:移动适配方案,自动计算html的 font-size 字体的大小。这个可以参考下面笔记。 www.yuque.com/chongqq/web… 安装:

npm install postcss-pxtorem -D
npm i -S amfe-flexible
复制代码

mian引入:

import  'amfe-flexible'
复制代码

index.html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
复制代码

vue.config.js:(这个主要是搭配vuecli使用的) 需要在vue.config.js文件中配置一下,如果没有找到这个文件,可以自己创建一个vue.config.js文件

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
         require('postcss-pxtorem')({
         // 换算的基数 默认为37.5,一般不建议修改它,使用vant ui框架中也是默认37.5
         rootValue: 37.5,
         // 忽略转换正则匹配项,插件会转化所有的样式的px。比如引入了三方UI,也会被转化.
         //项目中有不需要自动转换成PX的样式,就在此添加,如: .vant  表示 .vant 开头的都不会转换
         selectorBlackList: [],
         propList: ['*'], //属性的选择器,*表示通用
         }),
        ]
      }
    }
  }
}
复制代码

方案四

方式有很多,可以使用百分比布局,也可以rem布局,就是使用js控制根字体html字体的大小。具体的不详述了。

文章分类
前端
文章标签