跟着pink老师前端入门教程-day23
苏宁网首页案例制作
设置视口标签以及引入初始化样式
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
设置视口标签以及引入初始化样式
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
设置公共common.less文件
1. 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
2. 关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
3. 划分的份数我们定为 15等份
4. 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面
新建index.less文件
1. 新建index.less 这里面写首页的样式
2. 将刚才设置好的 common.less 引入到index.less里面 语法如下：
// 在 index.less 中导入 common.less 文件@import “common”
3. 生成index.css 引入到 index.html 里面
body样式
body {min-width: 320px;width:15rem;margin: 0 auto;line-height: 1.5;font-family: Arial,Helvetica;background: #F2F2F2;}
15-苏宁首页common.less制作_哔哩哔哩_bilibili
16-苏宁首页import导入样式_哔哩哔哩_bilibili
17-苏宁首页body样式设置_哔哩哔哩_bilibili
18-苏宁首页search-content模块布局_哔哩哔哩_bilibili
19-苏宁首页search-content内容布局_哔哩哔哩_bilibili
20-苏宁首页search模块制作_哔哩哔哩_bilibili
21-苏宁首页banner和广告模块制作_哔哩哔哩_bilibili
22-苏宁首页nav部分制作_哔哩哔哩_bilibili
4.3 rem 适配方案2
3.1 简洁高效的rem适配方案flexible.js
手机淘宝团队出的简洁高效 移动端适配库
再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
要做的，就是确定好当前设备的html 文字大小就可以了
比如当前设计稿是 750px， 那么只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值： 页面元素的px 值 / 75
剩余的，让flexible.js来去算
github地址：https://github.com/amfe/lib-flexible
3.2 使用适配方案2制作苏宁移动端首页
1、设置视口标签以及引入初始化样式还有js文件
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">我们页面需要引入 这个 js 文件在 index.html 中 引入 flexible.js 这个文件
2、body样式
body {min-width: 320px;width:15rem;margin: 0 auto;line-height: 1.5;font-family: Arial,Helvetica;background: #F2F2F2;}
24-rem适配方案2苏宁首页前期准备工作_哔哩哔哩_bilibili
25-rem适配方案2body样式修改_哔哩哔哩_bilibili
3.3 VSCode px 转换rem 插件 cssrem
26-一个神奇的vscode插件cssrem_哔哩哔哩_bilibili
27-修改flexible默认html字体大小_哔哩哔哩_bilibili
28-rem适配方案2search-content内容制作1_哔哩哔哩_bilibili
29-rem适配方案2search-content内容制作2_哔哩哔哩_bilibili