day06移动web

Willa25

已于 2022-05-12 13:38:59 修改

阅读量189

点赞数

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

于 2022-05-12 13:37:03 首次发布

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

版权

移动web 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

@[TOC](文章目录)

day06移动web
一、less
1.1 维护CSS的弊端
1.2 Less介绍
1.3 less的使用
1.3.1 注释

1.4 less语法
1.4.1 语法糖-CSS预处理语言
1.4.2 市场上的预处理器

1.5 嵌套less
伪元素

1.6 less变量
1.7 混合mixin
1.7.1 创建精灵图的混合

二、响应式布局
2.1 媒体查询
2.1.1 语法规范
2.1.2 关键字
2.1.3 写法
2.1.4 书写顺序

案例
2.2引入资源

day06移动web

一、less

1.1 维护CSS的弊端

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

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

概述：Less是一门CSS预处理语言，它扩展了CSS的动态特性
- 目标：使用Less语法快速编译生成CSS代码
- Less是一个CSS预处理器, Less文件后缀是.less
- 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
- 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
- less中文网：http://lesscss.cn/
- less网站：https://less.bootcss.com/
1.3 less的使用
1. 新建less文件（后缀名为.less）
2. vscode 安装插件 Easy Less
  - 编译插件：Easy Less
3. 正常去编辑less文件即可完全支持css语法
  - 在less.less文件写样式，保存自动生成对应的css文件（内容和less文件的一样)
```
div {
    width: 50px;
    height: 50px;background-color: pink;
}
```
4. 样式全部写完，浏览器要引入样式文件
  - 引入css文件（在html中引入.css文件，而不是.less文件)
```
<link rel="stylesheet" href="./less.css">
```
1.3.1 注释
```
// ctrl+/ 表示单行注释，不会编译在css中
/* 
shift + alt + a
多行注释，他就会编译在css中
 */

 /**
  这里会编译吗
 **/
```
- 对应css代码
```
/* 
shift + alt + a
多行注释，他就会编译在css中
 */
/**
  这里会编译吗
 **/
```

1.4 less语法

目标：使用Less运算写法完成px单位到rem单位的转换
less是完全支持css语法的–完全可以在less文件中编写正确的css语法
```
.box {
    // width: 200px;
    width: 100px + 20px;
    height: 300px - 100px;
    font-size: 30px * 2;
    // 注意：运算符号左右两边必须有一个空格
    // 可以进行加减乘除
    // 除法需要特别注意 需要加一个括号
    line-height: (30px / 2);
    background-color: skyblue;

    // 计算vw
    width: (100vw * 100 / 375);
}
```
- 效果图
  - 注意点：
  1. 运算符两边必须有一个空格
  2. 两个数参与运算，如果只有一个单位，那么就以这个单位为准
  3. 两个数参与运算，如果两个数都有单位，并且单位不一致时，以第一个为准
1.4.1 语法糖-CSS预处理语言
- 语法糖也叫糖衣语法: 是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。
- 通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。给复杂的编程语言包裹一层糖衣(易于开发者开发)。
- 常见的CSS预处理器：Sass、Less、Stylus
- Sass中文网：https://www.sass.hk/docs/
- 由于三种CSS预处理器语法类似，目前掌握一种即可
- css转换less/scss stylus https://www.sass.hk/css2sass/
1.4.2 市场上的预处理器
- sass(常用)
- less（常用)
- stylus

1.5 嵌套less

以前的选择器嵌套、

#header .logo {
    width: 300px;
}

现在的less嵌套
```
#header {
    .logo {
        width: 300px;
    }
}
```
- 交集/伪元素选择器易错点
1. 写法区别
2. 内层的选择器的前面没有&符号，则解析为选择其的后代

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

效果图
1. 如果有&符号，则被解析为父元素自身或父元素的伪类

  &:hover {
             color: pink;

效果图

.a {
    .b {
        > .c {
            font-size: 16px;
            }
        .d {
                height: 10px;
               > .e {
                color: orange;
                }
        }
    }
}

.a .b > .c {
  font-size: 16px;
}
.a .b .d {
  height: 10px;
}
.a .b .d > .e {
  color: orange;
}

伪元素

错误写法
```
div ::before {
  font-size: 15px;
}
```
- 效果图

注意：这里出现了一个空格，就不能正确表示伪元素，那么就变成一个选择器了

正确写法

// 伪元素前面不能加空格
// 伪类前面不能加空格
div {
    &::before {
        font-size: 15px;
    }
}

对应生成的css文件

div::before {
  font-size: 15px;
}

1.6 less变量

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

 @变量名：值；

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

div {
    width: 30px;
    height: 30px;
    // 2.使用变量
    color: @ThemeColor;
    background-color: @ThemeColor;
}

效果图

div {
  width: 30px;
  height: 30px;
  color: red;
  background-color: red;
}

注意：

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

1.7 混合mixin

描述:可以装多行代码，能够给多个标签引用，方便省事

使用步骤

创建混合

使用混合

 /* 1. 创建一个混合
      点.开头+名字+()
  */

.eleCenter(){
    display: flex;
    align-items: center;
    justify-content: center;
}

div {
    // 2. 使用混合
    .eleCenter();
}

a {
    .eleCenter();
}

效果(生成的对应css)

/* 1. 创建一个混合
      点.开头+名字+()
  */
div {
  display: flex;
  align-items: center;
  justify-content: center;
}
a {
  display: flex;
  align-items: center;
  justify-content: center;
}

1.7.1 创建精灵图的混合

// 创建一个使用精灵图的混合 传参 js 函数
.sprites(@x,@y,@size) {
  background-image: url(http://md.zbztb.cn/uploads/143148964963/sprites.png);
  background-repeat: no-repeat;
  background-position: @x @y;
  background-size: @size;
}
div {
  .sprites(-250px,-70px,300px);
  width: 40px;
  height: 50px;
}
p {
  .sprites(-290px,-90px,200px);
  width: 40px;
  height: 50px;
}

对应css代码

div {
  background-image: url(http://md.zbztb.cn/uploads/143148964963/sprites.png);
  background-repeat: no-repeat;
  background-position: -250px -70px;
  background-size: 300px;
  width: 40px;
  height: 50px;
}
p {
  background-image: url(http://md.zbztb.cn/uploads/143148964963/sprites.png);
  background-repeat: no-repeat;
  background-position: -290px -90px;
  background-size: 200px;
  width: 40px;
  height: 50px;
}

二、响应式布局

一套代码，可以运行在PC端上和移动端上，而且提供比较友好的体验

pc端、移动端、响应式、自适应、百分比、流式布局
使用响应式相关网站：vscode官网、三星中国
适合使用的网站：
- 小公司、省成本
- PC端体验和移动体验，肯定比不上分别做两套网站
- 对网络信息的交互不太关注公司的也不是主要靠这个网站
技术原理：媒体查询

1.css语法，可以根据当前屏幕的宽度不同，去加载的对应一套css代码

2.1 媒体查询

目标：能够根据设备宽度的变化，设置差异化样式

媒体查询（Media Query）是CSS3的信语法。
媒体查询的作用
1. 使用@media查询，可针对不同的媒体类型定义不同的样式
2. f@media可以针对不同的屏幕尺寸设置不同的样式
3. 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4. 目前针对很多苹果手机、Android手机、平板等设备都用的到媒体查询
  
  2.1.1 语法规范
```
 @media mediatype and|not|only (media feature) {
            CSS-Code;
        }
```
  - 注意点
    1.用@media开头注意@符号
    2.mediatype 媒体类型
    3.关键字and not only
    4.media feature媒体特性必须有效括号包含
  2.1.2 关键字
  
  关键字将媒体类型或多个特性连接到一起作为媒体查询的条件
  - 注意
    1.and:可以将多个媒体特性连接到一起，相当于“且”的意思
    2.not: 排除某个媒体类型，相当于“非”的意思，可以省略
    3.only: 指定某个特定的媒体类型，可以省略
  2.1.3 写法
  - 媒体特性常用写法（开发常用）
    max-width
    min-width

2.1.4 书写顺序

min-width（从小到大）
max-width（从大到小）

1.按照从大到小的或者从小到大的思路
2.注意我们有最大值max-width和最小值min-width都是包含等于的
3.当屏幕小于540像素，背景颜色变为蓝色（x<=439）
4.当屏幕大于等于540像素并且小于等于969像素时背景颜色为绿色（540<x<=969）
5.当屏幕大于等于970像素时，背景颜色为洪水（x>=970）

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

案例

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

        @media screen and (min-width:301px)  and (max-width:999px){
            body {
                background-color: lime;
            }
        }

        @media screen and (min-width:1000px) {
            body {
                background-color: blue;
            }
        }

效果图

2.2引入资源

当样式复杂时，可以针对不同的媒体使用不同的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;
  }

Willa25

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day06移动web

文章目录@[TOC](文章目录)day06移动web一、less1.1 维护CSS的弊端1.2 Less介绍1.3 less的使用1.3.1 注释1.4 less语法1.4.1 语法糖-CSS预处理语言1.4.2 市场上的预处理器1.5 嵌套less伪元素1.6 less变量1.7 混合mixin1.7.1 创建精灵图的混合二、响应式布局2.1 媒体查询2.1.1 语法规范2.1.2 关键字2.1.3 写法2.1.4 书写顺序案例2.2引入资源day06移动web一、less1.1 维护CSS的弊端
复制链接

扫一扫

专栏目录