前端自适应 vue

最新推荐文章于 2024-04-11 16:05:19 发布

白小码

最新推荐文章于 2024-04-11 16:05:19 发布

阅读量317

点赞数

分类专栏：前端知识文章标签：前端 vue.js css

本文链接：https://blog.csdn.net/m0_57364615/article/details/122131436

版权

前端知识专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1.使用媒体查询

查找入口文件index.js,在<head></head>标签添加这一句

    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, user-scalable=no">

然后看你的需求.是要求在所有得换是只是pc端跟手机端,接下来以这个为例

//在默认宽度的设备下title的样式
.title {
  height: 42px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid rgba(187, 187, 187, 0.4);
  font-size: 22px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 28px;

//在0~767px宽度的设备下title的样式
  @media (max-width:767px) {
    font-size: 16px;
    height: auto;
    line-height: normal;
    padding: 8px 0;
  }

//在767~992px宽度的设备下title的样式
  @media (min-width:767px)and(max-width:767px) {
    font-size: 16px;
    height: auto;
    line-height: normal;
    padding: 8px 0;
  }
}

不同的适配:

超小屏幕（手机） 768px以下
小屏设备（平板） 768px-992px
中等屏幕（旧式电脑） 992px-1200px
大屏设备（现代电脑） 1200px以上

2.使用rem布局

rem是相对单位,具体想了解你可以百度,rem是相对于html的字体的一个单位,你可以直接设置

html {
font-size:16px;
}

因为16px=1rem

然后开发时候,所有单位使用rem就可以了

做自适应记得尽量不要给宽度和高度

白小码

关注

0
点赞
踩
0

收藏

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

1.使用媒体查询查找入口文件index.js,在<head></head>标签添加这一句 <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1, user-scalable=no">然后看你的需求.是要求在所有得换是只是pc端跟手机端,接下来以这个为例//在默认宽度的设备下title的样式.title { height: .
复制链接

扫一扫