Web移动端-part05(移动端适配)

最新推荐文章于 2023-08-26 10:17:59 发布

一个大萝北

最新推荐文章于 2023-08-26 10:17:59 发布

阅读量153

点赞数 2

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_40797578/article/details/127256690

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、移动端适配

适配：页面变大，内容变大。页面变小，内容变小，

1、rem

长度单位。用rem单位设置网页元素的尺寸。
相对单位。相对于浏览器html标签的字体大小

rem&em区别：

em 跟父元素和自己的字体大小有关。
rem只跟html标签字体大小有关。

2、如何用rem进行移动适配

1）检测屏幕大小-媒体查询@media

 @media(媒体特性){
            选择器{
                css属性;
            }
        }
如：
/* 当查询到屏幕宽度为375px时，将body的背景颜色改为粉色 */
@media(width:375px){
            body{
                background-color: pink;
            }
        }

2）设置html标签字号

目前rem布局方案中，将网页等分成10份，html标签的字号为视口宽度，推荐 html字体大小=1/10的屏幕宽度

   @media(width:375px){
            html{
                font-size: 37.5px;
            }
        }
/* 将盒子宽度设为75px  width=75/37.5 */
        .box{
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }

3、flexible.js

使用flexible.js配合rem实现在不同宽度中的适配

引入js：把屏幕分成了10份，设置了html的字体大小为当前页面的10分之一，不需要写媒体查询

 <!-- 在body最下面引入js文件--规范 -->
<body>
    <script src="./js/flexible.js"></script>
</body>

4、Less语法

less是一个CSS预处理器，Less文件后缀是 .less
扩充了CSS语言使CSS具备一定的逻辑性、计算能力。
常用的预处理器还有Sass 、Stylus

1）注释

// 单行注释 ctrl+/
/*  
多行注释    alt+shift+a
*/

2）运算

//    加法
width: 200px + 300px;
//    减法  
height: 200px - 20em;
// 乘法
margin: 50rem * 5;
// 除法
padding: (20rem / 10px);
// padding: 20rem ./ 10px;

注意点：

1.符号之间使用空格隔开

2.存在多个单位时，以第一个为准

3.除法两种写法，添加点或者小括号

常用：

// /假如我们测量的值是75*75px  转em
.one{
    height: (75rem / 37.5);
    width: (75rem / 37.5);
}

4) 后代选择器

直接嵌套在里面

.father{
    .son{
        
    }
  // 伪类选择器写法：
  //&表示当前包裹他的元素，一般配合伪元素和伪类选择器
    &::after{
        content: '';
    }
    p{
        &:nth-child(2){
            color: chartreuse;
        }
    }
}

5)定义变量

作用：方便后面的维护和修改

// 定义变量
//采用驼峰命名法，语义化
@BaseSize:37.5rem;
p{
    width:(150 / @BaseSize); 
}

6)less导入

@import "文件路径"
    
// 引入其他less文件
@import url(./test.less);
// 第二种 
// @import './test.less';

7）less导出css文件

//out:"../css/"
第二种：
//out:url(../css/)

禁止导出
//out:false

5、到目前为止的项目搭建

文件目录文件夹 images(不更新的图片) 、js 、lib-iconfont 、less 、 update(经常更新的图片) 、css 、ico图标如：
创建 index.html 、index.less 文件 ,index.less会自动创建index.css文件保存在css文件夹中，index.html中需要用link引用index.css文件-见4

在index.less中引入 normalize.less和base.less

// 导入初始化的base.less
 @import './base.less';

//  导入移动端兼容性normalize.less
@import url(./normalize.less);

在index.html中引入

<!--导入标题图标 -->
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <!-- 导入字体图标 -->
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <!-- 导入当前文件css -->
    <link rel="stylesheet" href="./css/index.css">

在底部body上面引入js文件

 <!-- 要做适配：需要导入js -->
    <script src="./js/flexible.js"></script>

在index.less中定义变量基准值
```
// 转rem基准值
@BaseSize:37.5rem;
```