布局 屏幕适配 css预处理器"/>
vw 布局 屏幕适配 css预处理器
vh vw相对长度单位
-
vw vh (viewpoint width viewpoint height)
-
vw相对于屏幕的宽度 规定不管你屏幕是100px 或者200px
-
vh如上
-
例:
100vw = 320px1vw = 3.2px
tip:
ui给我们移动端 设计稿
可以按照设计稿 做 移动端屏幕适配
里面的大部分元素(盒子 文字 图片 字体图标)都需要跟屏幕宽度变化而变化
屏幕越大 元素越大
- 屏幕适配 代码怎么敲 写什么样的宽高 才会实现效果
(无非就是长度单位的选择) 先排除px- 相对长度单位 % em (相对父元素或者自己) 不常用
- 相对长度单位vw vh rem
- 公式 :
- 手机屏宽 / 设置稿宽 = 手机div宽 / 设计稿div宽
- 设计稿宽度 已知 量取
- 手机屏宽 已知 100vw
- 设计稿div宽 已知 量取
- 手机中div宽 未知 计算
- 字体 设置屏幕适配公式如上 (设计稿宽度和设计稿字体宽度测量)
代码演示
/* 使用rem + 媒体查询 进行响应式布局 */
/* 设计稿宽度750 */// 手机宽 / 设计稿宽 = 手机div宽 / 设计稿div宽// 手机div宽 = 手机宽 / 设计稿宽 * 设计稿div宽// 手机div宽 = 10rem / 750 * x
@ratio : 10rem / 750;
css预编译器
- 常用的css预处理器
less
sass
stylus
- 这三种语法特别相似 只要掌握了一种 另外两种相差不多
- 作用 : 提高开发效率 更加灵活 高效;
- css预处理器的 执行过程:
- 新建less文件
- 按照less语法规范 编写 合理样式代码
- 借助工具 将less文件 编译成 css文件
- 网页还是像以前一样 加载css文件
- 常用语法
- 变量
- 嵌套
- 混合 mixin 函数
- 不带参数 直接整坨代码塞进去
- 带参数 灵活根据需求改变参数 (@参数) 【参数前使用@】
- 导入
- 在大型框架时才会使用
屏幕端 适配:
- 拿到设计稿 (假设750px)
- 自己把浏览器设定在 屏幕下 (350px)
- 里面的元素 大小 字体 按照设计稿一样 都写px (先按设计稿改)
- 最后 再去通过vw less技术 来挨个替换项目里面的px
- 使用公式
- 手机宽 / 设计稿宽 == 手机div宽 / 设计稿div宽
- @ratio :手机宽 * 设计稿div宽 / 设计稿宽
- 即 @ratio :手机宽 / 设计稿宽 * 设计稿div宽
- 即 @ratio :100vw *稿宽
- 元素 样式 :量取的稿div宽 * @radio
- css文件名改为less
- 背景图的/符号 使用~“/” 变成字符
- px改成 乘上计算好的倍数 *@ratio
更多推荐
vw 布局 屏幕适配 css预处理器
发布评论