【HTML CSS】笔记11日 移动WEB开发之rem适配布局

最新推荐文章于 2024-05-02 12:19:25 发布
最新推荐文章于 2024-05-02 12:19:25 发布
阅读量223 收藏 1
点赞数
分类专栏： 前端 文章标签： 前端

在这里插入图片描述
在这里插入图片描述

1. rem 基础

1.1. rem 单位

  • em 相对于父元素的字体大小来说的，em 是父元素字体大小。
  • rem（root em）是一个相对单位，类似于 em，但它是相对于 html 元素字体大小来说的。
  • rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小可以整体控制。
  • 例如，根元素（html）设置 font-size=12px; 非根元素设置 width: 2rem; 则换成 px 表示就是 24px。
    <style>
      html {
        font-size: 12px;
      }

      div {
        font-size: 12px;
        width: 15rem;
        height: 15rem;
        background-color: purple;
      }

      p {
        /* 1. em相对于父元素 的字体大小来说的 */
        /* width: 10em;
            height: 10em; */
        /* 2. rem 相对于 html元素 字体大小来说的 */
        width: 10rem;
        height: 10rem;
        background-color: pink;
        /* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
      }
    </style>
  </head>

  <body>
    <div>
      <p></p>
    </div>
  </body>

2. 媒体查询

2.1什么是媒体查询

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

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

2.2 语法规范

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
  • 用 @media 开头，注意 @ 符号。
  • mediatype 媒体类型
  • 关键字 and not only
  • media feature 媒体特性必须有小括号包含。
2.2.1 mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型。
请添加图片描述

2.2.2 关键字

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

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not：排除某个媒体类型，相当于“非”的意思，可以省略。
  • only：指定某个特定的媒体类型，可以省略。
2.2.3 媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个，注意它们要加小括号包含。
请添加图片描述

    <style>
      /* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式 */
      /* max-width 小于等于800 */
      /* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */

      @media screen and (max-width: 800px) {
        body {
          background-color: pink;
        }
      }

      @media screen and (max-width: 500px) {
        body {
          background-color: purple;
        }
      }
    </style>
  </head>

  <body></body>

案例：根据页面宽度改变背景颜色

在这里插入图片描述
（1）按照从大到小的或者从小到大的思路。
（2）注意我们有最大值 max-width 和最小值 min-width 都是包含等于的。
（3）当屏幕小于540像素，背景颜色变为蓝色（x <= 539）。
（4）当屏幕大于等于540像素并且小于等于969像素的时候背景颜色为绿色（540<=x<=969）。
（5）当屏幕大于等于970像素的时候，背景颜色为红色（x >= 970）。

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，但是我们最喜欢的还是从小到大来写，这样代码更简洁。

    <style>
      /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
      /* 2. 小于540px 页面的背景颜色变为蓝色 */

      @media screen and (max-width: 539px) {
        body {
          background-color: purple;
        }
      }
      /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
      /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                background-color: green;
            }
        } */

      @media screen and (min-width: 540px) {
        body {
          background-color: skyblue;
        }
      }
      /* 4. 大于等于970 我们页面的颜色改为 红色 */

      @media screen and (min-width: 970px) {
        body {
          background-color: pink;
        }
      }
      /* 5. screen 还有 and 必须带上不能省略的 */
      /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */
    </style>
  </head>

  <body></body>

在这里插入图片描述

2.3 媒体查询 + rem实现元素动态大小变化

（1）rem 单位是跟着 html 来走的，有了 rem 页面元素可以设置不同的大小尺寸。（2）媒体查询可以根据不同设备宽度来修改样式。（3）媒体查询 + rem 就可以实现不同设备宽度，实现页面元素大小的动态变化。

在这里插入图片描述

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* html {
            font-size: 100px;
        } */
      /* 从小到大的顺序 */

      @media screen and (min-width: 320px) {
        html {
          font-size: 50px;
        }
      }

      @media screen and (min-width: 640px) {
        html {
          font-size: 100px;
        }
      }

      .top {
        height: 1rem;
        font-size: 0.5rem;
        background-color: green;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    </style>
  </head>

  <body>
    <div class="top">购物车</div>
  </body>

2.4 引入资源（理解）

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）。原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
      /* 当我们屏幕小于640 我们让div一行显示一个 */
      /* 一个建议： 我们媒体查询最好的方法是从小到大 */
      /* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
    </style>
    <link
      rel="stylesheet"
      href="style320.css"
      media="screen and (min-width: 320px)"
    />
    <link
      rel="stylesheet"
      href="style640.css"
      media="screen and (min-width: 640px)"
    />
  </head>

  <body>
    <div>1</div>
    <div>2</div>
  </body>
</html>

3. Less 基础

3.1 维护 CSS 的弊端

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

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

3.2 Less 介绍

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

总结：Less 是一门 CSS 预处理语言，它扩展了CSS的动态特性。

Less安装
  • 安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/
  • 检查是否安装成功，使用 cmd 命令（win10是 window+r 打开运行输入cmd ） —输入node –v 查看版本即可。
  • 基于nodejs在线安装 Less，使用 cmd 命令 npm install -g less 即可。
  • 检查是否安装成功，使用cmd命令lessc -v查看版本即可。

3.3 Less 使用

我们首先新建一个后缀名为 less 的文件，在这个文件里面书写 less 语句。例如：my.less：
在这里插入图片描述
接下来的内容有：Less 变量、Less 编译、Less 嵌套、Less 运算。

3.4 Less 变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

  • 语法格式：@变量名: 值;
  • 必须有@为前缀。
  • 不能包含特殊字符。
  • 不能以数字开头。
  • 大小写敏感
@color: pink;

3.5 Less 编译

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式，这些规则最终会通过解析器，编译生成对应的 CSS 文件。因此，我们需要把我们的 less 文件编译生成 css 文件，这样我们的 html 页面才能使用。

3.5.1 VScode Less 插件 ⭐⭐

Easy LESS 插件用来把 less 文件编译为 css 文件。安装完毕插件，重新加载下VScode后，只需要保存一下 less 文件，就会自动生成 css 文件。
在这里插入图片描述
例如：新建 my.less 文件，文件内容如上述 less 文件，保存后，VScode自动生成 my.css 文件。新建了一个html文件，引入my.css文件，之后就可以改变html中的样式了。
在这里插入图片描述

3.6 Less 嵌套

我们经常用到选择器的嵌套，例如下面代码所示：

#header .logo {
  width: 300px;
}

将 css 改为 less，less 的写法为：

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

如果遇见 （交集|伪类|伪元素选择器） ，利用 & 进行连接。

  • 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代。
  • 如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
a:hover{
    color:red;
}
/* Less 嵌套写法 */
a{
  &:hover{
      color:red;
  }
}

nest.less 文件
在这里插入图片描述
生成的nest.css文件

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: red;
}
.header a:hover {
  color: blue;
}
.nav .logo {
  color: green;
}
.nav::before {
  content: "";
}

less嵌套.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* .header {}
        .header a {} */
    </style>
    <link rel="stylesheet" href="nest.css" />
  </head>

  <body>
    <div class="header">
      <a href="#">文字</a>
    </div>
    <div class="nav">
      <div class="logo">传智播客</div>
    </div>
  </body>
</html>

3.7 Less 运算 ⭐

任何数字、颜色或者变量都可以参与运算。Less提供了加（+）、减（-）、乘（*）、除（/）算数运算。

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
注意：

  • 乘号（*）和除号（/）的写法 。

  • 运算符中间左右有个空格隔开 1px + 5 。

  • 对于两个不同单位的值之间的运算，运算结果的值取第一个值的单位。

  • 如果两个值之间只有一个值有单位，则运算结果就取该单位。

  • count.less文件

在这里插入图片描述

  • count.css 文件
html {
  font-size: 50px;
}
div {
  width: 150px;
  height: 500px;
  border: 10px solid red;
  background-color: #444444;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}
  • less运算.html文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="count.css" />
  </head>

  <body>
    <div></div>
  </body>
</html>

4. rem 适配方案

4.1 rem 实际开发适配方案

（1）按照设计稿与设备宽度的比例，动态地计算并设置 html 根标签的 font-size 大小；（媒体查询）
（2）CSS 中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为 rem 为单位的值。
在这里插入图片描述

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

在这里插入图片描述
总结：两种方案现在都存在。方案2更简单，现阶段大家无需了解里面的JS代码。

4.3 rem 实际开发适配方案1

rem + 媒体查询 + less 技术

4.3.1 设计稿常见尺寸宽度

在这里插入图片描述
一般情况下，我们以一套或者两套效果图适应大部分的屏幕，放弃极端屏或者对其优雅降级，牺牲一些效果。现在基本以750为准。

4.3.2 动态设置 html 标签 font-size 大小

在这里插入图片描述

4.3.3 元素大小取值方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      @media screen and (min-width: 320px) {
        html {
          font-size: 21.33px;
        }
      }

      @media screen and (min-width: 750px) {
        html {
          font-size: 50px;
        }
      }

      div {
        width: 2rem;
        height: 2rem;
        background-color: pink;
      }
      /* 1. 首先我们选一套标准尺寸 750为准 
        2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
      /* 3. 页面元素的rem值 =  页面元素在 750像素的下px值 / html 里面的文字大小 */
    </style>
  </head>

  <body>
    <div></div>
  </body>
</html>

5. 苏宁首页案例制作

5.1 技术选型

在这里插入图片描述

5.2 搭建文件夹结构

5.3 设置视口标签以及引入初始化样式

在这里插入图片描述

5.4 设置公共 common.less 文件

在这里插入图片描述

5.5 新建 index.html 文件

在这里插入图片描述

5.6 body样式

body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}

6. rem 适配方案2

6.1 简洁高效的rem适配方案flexible.js

在这里插入图片描述
github地址：https://github.com/amfe/lib-flexible。

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

6.2 使用适配方案2制作苏宁移动端首页

6.2.1 技术选型

在这里插入图片描述

6.2.2 搭建文件夹结构

6.2.3 设置视口标签、引入初始化样式以及js文件

在这里插入图片描述
在这里插入图片描述

6.2.4 body样式

在这里插入图片描述

6.3 VScode px 转换 rem 插件 cssrem

在这里插入图片描述
安装好插件之后，需要设置html字体大小基准值。

  • 打开设置，快捷键是 ctrl + 逗号。
    在这里插入图片描述
    在这里插入图片描述
Anbelin
关注
专栏目录
rem适配布局
qq_46492364的博客
04-11 425
文章目录前言一、rem单位二、媒体查询1.媒体查询书写语法2.媒体查询案例-背景变色3.媒体查询+rem，实现动态元素大小变化4.引入资源三、维护css弊端1.css的弊端2.维护css弊端（Less的简介和安装）3.Less变量4.Less编译5.Less嵌套6.Less运算四、rem适配1.rem适配原理2.rem适配方案总结 前言 这部分开学习rem适配布局，能够解决移动端网页高度和文字大小随着网页窗口的变化而变化。接下来开始学习吧 一、rem单位 （1）em单位:相对单位，参考的是父级元素字号大
移动WEB开发之rem适配布局与响应式布局学习笔记
Lostdeer的博客
12-23 741
移动WEB开发之rem适配布局与响应式布局学习笔记1 rem适配布局1.1 rem 基础1.2 媒体查询1.2.1 什么是媒体查询1.2.2 语法规范1.3 Less 基础1.3.1 维护 css 的弊端1.3.2 Less 介绍1.3.3 Less 变量1.3.4 Less 编译1.3.5 Less 嵌套1.3.6 Less 运算1.4 rem 实际开发适配方案11.5 rem 实际开发适配方案22 响应式布局2.1 响应式开发原理2.2 响应式布局容器2.3 Bootstrap前端开发框架2.3.1 B
移动端web开发之rem适配布局
weixin_46513544的博客
08-22 178
系列文章目录 页面布局文字能够随着屏幕的大小变化而变化 流式布局和flex布局主要针对于宽度布局，那高度如何设置 怎么样让屏幕发生变化时候元素高度和宽度等比例缩放 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、rem单位？二、使用步骤1.引入库2.媒体查询2.lessrem实际开发适配方案1总结 前言 一、rem单位？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下
前端基础知识第三章---移动端WEB开发之rem适配布局(1)
最新发布
2401_84411072的博客
05-02 90
1️⃣ Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也成为CSS预处理器；2️⃣ 做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法上，为CSS加入程序式语言的特性；3️⃣ 它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，Less 可以让我们用更少的代码做更多的事情；
笔记--移动Web开发(bootstrap框架响应式布局)
qq_43488583的博客
09-08 709
1. 响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕( 手机 ) <768px 小屏设备( 平板 ) >=768px ~ <992px 中等屏幕( 桌面显示器 ) >=992px ~ <1200px 宽屏设备( 大桌面显示器 ) >=1200px 1.2 响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理就
CSS学习笔记(二) 移动WEB开发
kianagrow的博客
04-22 258
思维导图 文章目录思维导图1. 移动端基础1.1 浏览器现状1.2 手机屏幕现状1.3 移动端调试方法2. 视口2.1 布局视口2.2 视觉视口2.3 理想视口2.4视口总结meta视口标签3. 二倍图3.1 物理像素&物理像素比3.2 背景缩放3.3 多倍图切图工具4. 移动端开发选择4.1 单独移动端页面4.2 响应式兼容PC移动端5. 移动端技术解决方案5.1 移动端浏览器5.2 CSS初始化5.3 盒子模型选择5.4 特殊样式6. 移动端常见布局 1. 移动端基础 1.1 浏览器现状
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4536
HTML/CSS笔记#自用#尚硅谷#李立超
详解rem 适配布局
12-13
当今手机种类繁多 且不说iphone系列，安卓手机的种类已经数不胜数了，所以不可能每一款手机都要写一套布局样式，这也是不可能做到的，但是对于越来越精益求精的前端来说 ，当然要找到一个合理的解决方案。rem 就是用来自适应布局的。 适配要达到的效果，如下图（简单的示范一下） 两个div不论在大屏还是小屏上都是占据屏幕的一半 虽然上面这种简单的使用百分比可以实现但是，百分比无法实现字体的自适应，百分比转换成相应的尺寸还是很难的。接下来就说说这次我们的主角 rem （我们一般只适配宽度） rem 原理解析 首先rem是一个相对于根元素fontSize大小的相对单位，也就是说 1rem 等于 htm
布局 - rem适配布局
友人A的博客
05-06 408
rem基础 媒体查询 Less基础 rem适配方案
从前慢-移动WEB开发之rem适配布局
unique_perfect的博客
01-17 277
移动WEB开发之rem适配布局 1.1 rem 基础 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
（精中求精） rem适配布局
LOxia的博客
03-24 4245
rem适配布局极为详细，含苏宁案例代码
3、rem适配布局
鸵鸟
09-22 252
rem适配布局
移动WEB开发之rem适配布局
surx123456的博客
04-05 1310
Less是一门css预处理语言，他扩展了css的动态特性。
HTML5语义化与CSS选择器精讲：布局与定位技巧
本资源是一份针对初级开发人员设计的HTML和CSS学习笔记，主要涵盖了HTML5的新特性和语义化应用、CSS选择器及优先级、position属性的不同值及其区别，以及页面布局技术。 1. **HTML5新特性与语义化** HTML5的语义化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值