网站是怎么建立起来的,智库建设网站方案,小企业做网站,番禺网站开发哪里好01-移动 Web 基础
谷歌模拟器
模拟移动设备#xff0c;方便查看页面效果 屏幕分辨率
分类#xff1a;
物理分辨率#xff1a;硬件分辨率#xff08;出厂设置#xff09;逻辑分辨率#xff1a;软件 / 驱动设置
结论#xff1a;制作网页参考 逻辑分辨率 视口
作用方便查看页面效果 屏幕分辨率
分类
物理分辨率硬件分辨率出厂设置逻辑分辨率软件 / 驱动设置
结论制作网页参考 逻辑分辨率 视口
作用显示 HTML 网页的区域用来约束 HTML 的尺寸
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!– 视口标签 --meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/htmlwidthdevice-width视口宽度 设备宽度initial-scale1.0缩放1倍不缩放
二倍图
概念设计稿里面每个元素的尺寸的倍数
作用防止图片在高分辨率屏幕下模糊失真
使用方法 适配方案 宽度适配宽度自适应 百分比布局Flex 布局 等比适配宽高等比缩放 remvw
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.documentElementvar dpr window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize (12 * dpr) px}else {document.addEventListener(DOMContentLoaded, setBodyFontSize)}}setBodyFontSize();// set 1rem viewWidth / 10function setRemUnit () {var rem docEl.clientWidth / 10docEl.style.fontSize rem px}setRemUnit()// reset rem unit on page resizewindow.addEventListener(resize, setRemUnit)window.addEventListener(pageshow, function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr 2) {var fakeBody document.createElement(body)var testElement document.createElement(div)testElement.style.border .5px solid transparentfakeBody.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
/bodyrem 移动适配
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
