移动端的适配问题

最新推荐文章于 2022-06-07 13:50:00 发布

如果决定要走又何必挽留

最新推荐文章于 2022-06-07 13:50:00 发布

阅读量488

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_59076775/article/details/121583718

版权

css 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了@media查询在响应式设计中的应用，包括不同屏幕尺寸下的媒体适配示例。此外，还讲解了rem和vw单位的原理及在项目中的使用，如amfe-flexible.js和postcss工具的应用，适合前端开发者理解和实践布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.媒体查询的定义

（1）作用和简介;

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

(2) 代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .aa{
      width:100px;
      height: 100px;
      font-size: 20px;
       background-color: pink;
       line-height: 100px;
       text-align: center;
       transition: all 0.5s;
    }
  
 
    @media screen and (max-width:1200px) {
    /* 小于1200px */
    .aa{
    background-color: firebrick;
      font-size: 70px;
      width: 600px;
      height: 600px;
    } 
        /* 当屏幕小于750的时候  宽高 由于 450-600  颜色 蓝色-->酒红*/
       /* 字体大小由于50-70px */
     
    }
    @media screen and (max-width:750px) {
      /* 小于750px的情况 */
    .aa{
       background-color: chocolate;
      font-size: 50px;
      width: 450px;
      height: 450px;
    } 
        /* 当屏幕小于750的时候  宽高 由于 200-450   颜色 蓝色-->橙色*/
       /* 字体大小由于30-50px */
    }
      /* 小576像素情况 */
      @media screen and (max-width:576px) {
    .aa{
      background-color: royalblue;
      font-size: 30px;
      width: 200px;
      height: 200px;
    } 
    /* 当屏幕小于576的时候  宽高 由于 100-200   颜色 pink--->蓝色 */
    /* 字体大小由于20-30px */
    }
  </style>
</head>
<body>
  <div class="aa">
    <h3> 御剑传说----剑姬 </h3>
  </div>
  
</body>
</html>

(3)图示：

二.rem适配方案

1.什么是rem？

相对于html下的font-size

2.设计稿999px，在789px做适配转换成rem

999/10=99.9

789/99.9

设计稿的1rem 作为标准，将屏幕像素除以设计稿的1rem

得到现有的rem

3.amfe-flexble.js的应用

（1）作用: 将html下的fontsize设置成屏幕宽度的1/10。

（2）安装和导入

- 安装 amfe-flexible插件
  - yarn add amfe-flexible
  - npm i amfe-flexible
- 在main.js导入
  - import "amfe-flexible"

4.vant:设计稿375px ，并且提前写好css样式怎么处理

(1):安装postcss-pxtorem

 yarn add  postcss-pxtorem@5.0.0
 npm i  postcss-pxtorem@5.0.0

(2):配制

创建postcss.config.js(加载css时使用)
module.exports={
    plugins:{
        rootValue:基准值(37.5),
        propList:哪些css需要转换，针对的css选择["*"]
    }
}

html 下font-size=屏幕宽度/10

设计稿：1080   723px用rem表示    723/108rem



const path = require('path')
module.exports = ({ file }) => {
  // 如果是vant的css需要转换，它的文件都是来自于node_modules/vant   
  // file.dirname:需要转换的文件路径
  const base = file.dirname.includes(path.join('node_modules', 'vant'))
    ? 37.5
    : 75
  return {
    plugins: {
      'postcss-pxtorem': {
        rootValue: base,
        propList: ['*']
      }
    }
  }
}

三.vw适配

1.vw为什么不用百分比而是用vw

1.百分比: 相对于父级的

2.vw:相对于视图

2.vw兼容性问题不好,成为主流的趋势

图示:

现在使用rem 主要是因为, 维护以前的老项目，不易发生更改。

3.安装

yarn add postcss-px-to-viewport -D

4.配置

根目录下的postcss.config.js：

const path=require('path')
module.exports=({file})=>{
 const base= file.dirname.includes(path.join('node_modules','vant'))?375:750
 return {
     plugins:{
         'postcss-px-to-viewport':{
             viewportWidth:base
         }
     }
 } 
}