CSS--移动web基础
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
01-移动 Web 基础
谷歌模拟器
模拟移动设备方便查看页面效果
屏幕分辨率
分类
- 物理分辨率硬件分辨率出厂设置
- 逻辑分辨率软件 / 驱动设置
结论制作网页参考 逻辑分辨率
视口
作用显示 HTML 网页的区域用来约束 HTML 的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!– 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- width=device-width视口宽度 = 设备宽度
- initial-scale=1.0缩放1倍不缩放
二倍图
概念设计稿里面每个元素的尺寸的倍数
作用防止图片在高分辨率屏幕下模糊失真
使用方法
适配方案
-
宽度适配宽度自适应
- 百分比布局
- Flex 布局
-
等比适配宽高等比缩放
- rem
- vw
02-rem
简介
- rem单位是相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
媒体查询
媒体查询能够检测视口的宽度然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
@media (width:320px) {
html {
background-color: green;
}
}
rem 布局
目前rem布局方案中将网页等分成10份 HTML标签的字号为视口宽度的 1/10。
flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
<body>
......
<script src="./js/flexible.js"></script>
</body>
rem 移动适配
rem单位尺寸
- 确定基准根字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号1/10视口宽度
- rem单位的尺寸
- rem单位的尺寸 = px单位数值 / 基准根字号
03-vw适配方案
vw和vh基本使用
vw和vh是相对单位相对视口尺寸计算结果
- vwviewport width1vw = 1/100视口宽度
- vhlviewport height ( 1vh = 1/100视口高度 )
vw布局
vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh问题
vh是1/100视口高度全面屏视口高度尺寸大如果混用可能会导致盒子变形
04-less
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意浏览器不识别 Less 代码目前阶段网页要引入对应的 CSS 文件
VS Code 插件Easy LESS保存 less文件后自动生成对应的 CSS 文件
注释
- 单行注释
- 语法// 注释内容
- 快捷键ctrl + /
- 块注释
- 语法/* 注释内容 */
- 快捷键 Shift + Alt + A
运算
- 加、减、乘直接书写计算表达式
- 除法需要添加 小括号 或 .
- 表达式存在多个单位以第一个单位为准
嵌套
作用快速生成后代选择器
提示用 & 表示当前选择器不会生成后代选择器通常配合伪类或伪元素使用
变量
概念容器存储数据
作用存储数据方便使用和修改
语法
- 定义变量@变量名: 数据;
- 使用变量CSS属性@变量名;
// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}
导入
作用导入 less 公共样式文件
语法导入: @import “文件路径”;
提示如果是 less 文件可以省略后缀
@import './base.less';
@import './common';
导出
写法在 less 文件的第一行添加 // out: 存储URL
提示文件夹名称后面添加 /
// out: ./index.css
// out: ./css/
禁止导出
写法在 less 文件第一行添加: // out: false
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |