文章目录

  • 移动端布局（续）
    • 四、rem 移动端适配
      • 1. 移动适配
      • 2. rem
      • 3. rem-移动适配-媒体查询（设置差异化的CSS样式）【基本原理】
      • 4. flexible
    • 五、Less
      • 1. Less
      • 2. 注释
      • 3. 运算
      • 4. 后代选择器
      • 5. 变量
      • 6. Less 导入其他 Less 文件
      • 7. Less 导出
      • 8. 禁止 Less 导出
  • 响应式布局【一般用响应式 UI 框架和媒体查询结合使用】
    • 一、媒体查询 （目标：能够根据设备宽度的变化，设置差异化样式）
      • 1. 媒体特性常用写法
      • 2. 完整写法（了解）
      • 3. 外联式 css 引入
    • 二、Bootstrap（布局响应式框架）
      • 1. Bootstrap 是前端 UI 框架，它提供了大量编写好的 css 样式，语序开发者结合一定的 HTML 结构和 JS 快速实现效果
      • 2. 中文官网： https://www.bootcss.com/
      • 3. Bootstrap 的使用
      • ❗❗ 4. Bootstrap 栅格系统
      • 5. 一些经常使用的类
  • 学习心得

移动端布局（续）

四、rem 移动端适配

1. 移动适配

  1. rem：目前多数企业在用的解决方案
  2. vw / vh：未来的解决方案

2. rem

相对单位，rem单位是相对于 HTML 标签的字号计算结果

1 rem = 1 HTML字号大小

3. rem-移动适配-媒体查询（设置差异化的CSS样式）【基本原理】

  • 媒体查询能够检测视口的宽度，然后编写差异化的CSS样式

  • @media (媒体特性) {选择器 {css属性}
}

  • 目前 rem 布局方案中，将网页等分成 10 份，HTML 标签的字号为视口宽度的 1/10。

4. flexible

flexible.js 是用于手淘开发出的一个用来适配移动端的 js 框架

五、Less

1. Less

  1. less 是一个 css 预处理器，Less 文件后缀是 .less
  2. 优点：扩充了 css，使 css 具备了一定的逻辑性、计算能力
  3. 注意：浏览器不识别 Less 代码，目前阶段，需要引 css

2. 注释

  1. 单行注释 //
  2. 多行注释 /* */

3. 运算

  1. 加、减、乘直接写
  2. 除需要加括号

4. 后代选择器

  1. 嵌套能快速生成后代选择器
  2. 注意：& 不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用。

5. 变量

  1. 定义变量： @变量名: 值;
  2. 使用变量： css 属性: @变量名;

6. Less 导入其他 Less 文件

  1. 导入： @import ‘文件路径’;

7. Less 导出

  1. 用 easyless插件导出步骤

    在 VSCode 设置中 搜索 easyless 点击 ’在 setting.json 中编辑‘ ——> 在 "Less.compile": {"out": "导出路径/"}

  2. 导出到单独路径中，在 less 文件开头编写// out: 路径/

8. 禁止 Less 导出

  1. 在 Less 文件第一行添加： // out: false

响应式布局【一般用响应式 UI 框架和媒体查询结合使用】

一、媒体查询 （目标：能够根据设备宽度的变化，设置差异化样式）

1. 媒体特性常用写法

  1. max-width 从大到小的顺序写
  2. min-width 从小到大的顺序写

2. 完整写法（了解）

  1. @media 关键词 媒体类型 and （媒体特性） {css 代码}
  2. 关键词： and only not

3. 外联式 css 引入

​ <link rel="stylesheet" media="(媒体特性)" href="xx.css"> 注意媒体特性需要加括号

二、Bootstrap（布局响应式框架）

1. Bootstrap 是前端 UI 框架，它提供了大量编写好的 css 样式，语序开发者结合一定的 HTML 结构和 JS 快速实现效果

2. 中文官网： https://www.bootcss.com/

3. Bootstrap 的使用

  1. Bootstrap 下载
  2. 引入 <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css">
  3. 调用类：使用 Bootstrap 提供的样式

❗❗ 4. Bootstrap 栅格系统

  1. 栅格化是指将整个页面宽度分成若干等份

  2. Bootstrap3 默认将网页分为 12 等份

  3. 超小屏幕 小屏幕 中等屏幕 大屏幕
    响应断点 <768px >=768px >=992px >=1200px
    别名 xs sm md lg
    容器宽度 100% 750px 970px 1170px
    类前缀 col-xs-* col-sm-* col-md-* col-lg-*
    列数 12 12 12 12
    列间隙 30px 30px 30px 30px

5. 一些经常使用的类

  1. .container 指定宽度且居中，类自带间距 15px
  2. .row 类自带间距 -15px
  3. .container-fluid 所有应用该类名的盒子，宽度均为100%、

学习心得

rem、vw和vh只用于移动端，并不是属于响应式布局的，刚开始错误的把他们归类为响应式，其实不然。响应式布局一般使用响应式UI框架和媒体查询相结合使用的。
注意Bootstrap的栅格系统，每个盒子左右内边距都有15px。

CSS - 移动Web网页开发（2）- 必掌握知识点 - #博学谷IT学习技术支持#相关推荐

  1. Vue.js项目实战开发（1）- 必掌握知识点 - #博学谷IT学习技术支持#

    文章目录 (补充) 前后端的身份认证 第一章 webpack+vue基础 Vue前置知识 1-1 ES6模块化 1. 回顾:node.js 中如何实现模块化 2. 前端模块化规范的分类 3. 什么是 ...

  2. Vue.js项目实战开发（4）- 必掌握知识点 - #博学谷IT学习技术支持#

    文章目录 生命周期.axios 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_ax ...

  3. web前端知识总结二（css（其他）+移动web网页开发）

    web前端知识总结二(css(其他)+移动web网页开发) 文章目录 web前端知识总结二(css(其他)+移动web网页开发) 字体图标 平面转换-位移 位移:绝对定位居中 开门效果 旋转 转换原点 ...

  4. HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发

    HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...

  5. html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发

    HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...

  6. 网页最少要有一个html标签,PHP_网页开发人员必须知道的10个不常用HTML标签， 网页开发人员常常希望能 - phpStudy...

    网页开发人员必须知道的10个不常用HTML标签 网页开发人员常常希望能够了解并掌握多种语言,结果是,学习一门语言的所有内容是棘手的,但是却很容易发现你并没有完全利用那些比较特殊却很有用的标签. 不幸的 ...

  7. 25个Web前端开发工程师必看的国外大牛和酷站

    逛了一周国外大牛们的博客与酷站,真是满满的钦佩.震撼.羡慕.惊喜---- Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要.无论是学习新技术,还是寻找免费资源与工具 ...

  8. 年度指南-Web网页开发学习总纲-2023修订版

    年度指南-Web网页开发学习总纲-2023修订版 为什么学习写代码? Web网页开发的用途 Web网页开发者类型 前端开发者 后端开发者 全栈开发者 可能需要用到的工具 HTML & CSS ...

  9. 网页设计作业 仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业

    HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...

最新文章

  1. OpenCV 笔记（01）— OpenCV 概念、整体架构、各模块主要功能
  2. 每天一道LeetCode-----将单词数组分成多行，每行长度相同，单词之间用空格分隔，要求空格尽量均匀分布
  3. 20135302魏静静——linux课程第六周实验及总结
  4. 【oracle】关于处理小数点位数的几个oracle函数
  5. ansys用什么cpu_ansys参数化建模教程专栏——以例子吹爆APDL的省时省力（一）。...
  6. SQL 错误代码汇总
  7. mysqld mysql-debug_mysqld --debug-sync
  8. [转载经验] 探亲签证申请
  9. 易语言计算机代码,易语言基础教程之简单代码的编写
  10. 解决PD虚拟机下载ch341驱动 虚拟机学习单片机 MAC学习单片机
  11. ppt入门到精通全套视频教程，Word+Excel+PPT三合一教程（15G）
  12. windows c语言 创建目录,C语言创建删不掉的文件夹
  13. 100道积分公式证明（41-50）
  14. javaScript实现通过鼠标滑轮改变元素大小
  15. Latex中将图例（图1：）改为（图1-1）
  16. 飞蛾投火式的瞬间灿烂
  17. 2021年芒种是几月几号？芒种习俗有哪些 ？
  18. LBR_iiwa_14_R820代码解析
  19. Windows配置ThingsBoard，并实现简单Demo（未完待续）
  20. 2021年国内应用商店App减少21%，合规分发已成必然

热门文章

  1. 最近深圳出现了一些骗子公司，职场的朋友一定要小心了
  2. VS编译提示：无法打开xxx.exe进行写入
  3. 蓝牙5.1的ble那些事儿
  4. java基础：网络编程（一）简介
  5. 国防科技大学 计算机硬件技术基础,国防科技大学--操作系统教程【40讲】--罗宇...
  6. maven 使用 Nexus 搭建私服并发布distributionManagement的配置使用
  7. 如何获取屏幕保护程序的密码
  8. aop编程时出现错误信息：java.lang.NoClassDefFoundError
  9. 微信小程序登录密码MD5加密
  10. webcam错误解决方法