移动web（移动适配）

Willa25

已于 2022-05-10 20:58:25 修改

阅读量167

点赞数

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

于 2022-05-06 16:17:30 首次发布

本文链接：https://blog.csdn.net/qq_52982670/article/details/124546641

版权

移动web 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

移动适配

@[TOC](移动适配)

前言
一、rem基础
1.1 初识rem
1.2 rem单位

二、媒体查询
2.1 语法规范
2.1.1 mediatype查询类型
2.1.2 关键字
2.1.3 媒体特性

2.2 宽度改变背景颜色案例
2.3 引入资源

三、Less基础
3.1 维护CSS的弊端
3.2 Less介绍
3.3 Less的使用
3.4 Less 变量
3.5 Less 编译
3.6 Less 嵌套
3.7 Less 运算

四、rem适配方案
4.1 rem 实际开发适配方案
4.2 rem 适配方案技术使用（市场主流）
4.2.1 技术方案1
4.2.2 技术方案2

前言

这篇文章是根据pink老师的直播来写的，里面的内容来自pink老师的直播课程撰写，如有侵权，联系删除。

一、rem基础

1.1 初识rem

rem(root em）是一个相对单位，类似以em，em ,是父元素字体大小；不同的是rem的基准是相对于html元素的字体大小（比如，根元素（html）设置font-size=12px;非根元素width：2em；则转换成px 表示就是24px ）

1.2 rem单位

html {
            font-size: 12px;
        }
        div {
            /* 3. 当改变 html 的字体大小由14p变为12px时，盒子跟着一起变小 */
            font-size: 12px;
            width: 15rem;
            height: 15rem;
            background-color: purple;
        }
        p {
            /* 1. em相对于父元素的字体大小来说的 */
            /* width: 10em;
            height: 10em; */

            /* 2. rem 相对于 html元素 字体大小来说的 */
            /* 此时盒子在页面中的大小为140x140 */
            width: 10em;
            height: 10em;
            background-color: pink;
            /* 3. rem 的优点：可以通过修改html里面的文字大小来改变页面中元素的大小来整体控制 */
        }

二、媒体查询

媒体查询（Media Query）是CSS3的信语法。

媒体查询的作用

使用@media查询，可针对不同的媒体类型定义不同的样式
f@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机、平板等设备都用的到媒体查询

2.1 语法规范

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

注意点
1.用@media开头注意@符号
2.mediatype 媒体类型
3.关键字and not only
4.media feature媒体特性必须有效括号；包含

2.1.1 mediatype查询类型

媒体类型：不同的终端设备划分成不同的类型

2.1.2 关键字

关键字将媒体类型或多个特性连接到一起作为媒体查询的条件

注意
1.and:可以将多个媒体特性连接到一起，相当于“且”的意思
2.not: 排除某个媒体类型，相当于“非”的意思，可以省略
3.only: 指定某个特定的媒体类型，可以省略

2.1.3 媒体特性

在这里插入图片描述

注意：它们都要加小括号包含

2.2 宽度改变背景颜色案例

思路：
1.按照从大到小的或者从小到大的思路
2.注意我们有最大值max-width和最小值min-width都是包含等于的
3.当屏幕小于540像素，背景颜色变为蓝色（x<=439）
4.当屏幕大于等于540像素并且小于等于969像素时背景颜色为绿色（540<x<=969）
5.当屏幕大于等于970像素时，背景颜色为洪水（x>=970）
注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，但是我们最喜欢的还是从小到大来写，这样代码更简洁
媒体查询从小到大优势代码分析

2.3 引入资源

当样式复杂时，可以针对不同的媒体使用不同的stylesheets（样式表）

原理：直接在link中判断设备的尺寸，然后引用不同的css文件
语法规范

  <link rel="stylesheet" media="mediatype and |not|only (media feature") href="mystylesheet.css">

案例代码

    <link rel="stylesheet" href="style320.css" media="screen and (min-width:320px">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width:640px">

    <style>
        /* 当我们屏幕大于等于640以上的，我们让div 一行显示多个 */
        /* 当屏幕小于等于640px，让div一行显示一个 */
        /* 建议：媒体查询最好从小到大 */
        /* 引入资源：针对不同的屏幕尺寸 调用不同的css文件 */
    
    </style>
</head>
<body>
     <div>1</div>
     <div>2</div>
</body>

/* style320 */
div {
    width: 100%;
    height: 100px;
}

div:nth-child(1) {
    background-color: pink;
}

div:nth-child(2) {
    background-color: lime;
}


/* style640 */
div {
    float: left;
    width: 50%;
    height: 100px;
}

div:nth-child(1) {
    background-color: pink;
}

div:nth-child(2) {
    background-color: lime;
}

三、Less基础

3.1 维护CSS的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

弊端

CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高端的
不方便维护及扩展，不利于复用
CSS没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出良好且易于维护的CSS代码项目

3.2 Less介绍

Less是一门CSS预处理语言，它扩展了CSS的动态特性
在这里插入图片描述
Less中文网址：http://lesscss.cn/

3.3 Less的使用

首先新建一个后缀名为less的文件,在这个less文件里面书写less语句
less 变量
less编译
less嵌套
less运算

3.4 Less 变量

变量:没有固定的值，可以改变，因为css中的一些颜色和数值等经常使用

 @变量名：值；

// @变量名：值
// 注释多行快捷：alt+shift+a 
/* 注意：1、不能以数字开头  
        2. 区分大小写
        3、不能包含特殊符号
 */ 
//  1. 定义变量
@color:red;
body {
    // 2. 使用变量
    background-color: @color;
}

div {
    color: @color;
}

注意：

必须有@为前缀
不能包含特殊符号
不能以数字开头
区分大小写

3.5 Less 编译

less包含有一套自定义的语法及一个解析器，可以通过这些语法规则编译生产对应的css文件，在html中是不能直接使用的，需要把less文件编译成css文件
修改less 文件之后，保存好后对应css同时修改

3.6 Less 嵌套

以前的选择器嵌套

#header .logo {
    width: 300px;
}```
* 现在的less嵌套

```css
#header {
    .logo {
        width: 300px;
    }
}

交集/伪元素选择器易错点

写法区别
内层的选择器的前面没有&符号，则解析为选择其的后代

    a{
        color:red;
        :hover {
        color: pink;
    }
    }
}

在这里插入图片描述
4. 如果有&符号，则被解析为父元素自身或父元素的伪类

 &:hover {
        color: pink;

在这里插入图片描述

3.7 Less 运算

less文件

@border:3px + 5px;
// 注意：运算符号左右两边必须有一个空格
// 可以进行加减乘除
div {
    width: 200px - 50px;
    height: 200px;
    border: @border solid red;
}

对应css文件

div {
  width: 150px;
  height: 200px;
  border: 8px solid red;
}

注意点：

运算符两边必须有一个空格
两个数参与运算，如果只有一个单位，那么就以这个单位为准
两个数参与运算，如果两个数都有单位，并且单位不一致时，以第一个为准

四、rem适配方案

4.1 rem 实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小：(媒体查询）
CSS中，设计元素的宽、高、相对位置等取值，按照等比例换算为rem单位的值

4.2 rem 适配方案技术使用（市场主流）

4.2.1 技术方案1

less
媒体查询
rem

4.2.2 技术方案2

这种方案相对来说比较简单一些

flexible.js
rem

Willa25

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web（移动适配）

移动适配@[TOC](移动适配)前言一、rem基础1.1 初识rem1.2 rem单位二、媒体查询2.1 语法规范2.1.1 mediatype查询类型2.1.2 关键字2.1.3 媒体特性2.2 宽度改变背景颜色案例三、Less基础四、rem适配方案五、苏宁易购首页案例总结前言因这篇完文章的课程还没上完，所以小博写的这篇文章是根据pink老师的直播来写的，里面的内容来自pink老师的直播课程撰写，如有侵权，联系删除。一、rem基础1.1 初识remrem(root em）是一个相对单位，类似以e
复制链接

扫一扫

专栏目录