小兔鲜儿PC端总结

布局的思路：

1.不要被技术限制了：

​ 浮动 定位 块级 行内 flex布局 哪些简单方便的实现功能，就是用哪些！！！

2.先划分大盒子 写注释 加内容 加样式

3.调试代码的时候，多用谷歌浏览器

4.布局出错的原因

​ a.标签嵌套出错了

​ b.标签和选择器对应不上

​ c.css样式优先级

5.当一个模块无从下手的时候 只看大内容 不用文字 小图标

vw/vh 的了解

1.作用：屏幕适配使用.

2.相对长度单位：100vw=屏幕宽度

实现效果

rem

目标：能够使用rem 单位设置网页元素的尺寸

网页效果

屏幕宽度不同，网页元素尺寸不同（等比例缩放）

px单位是绝对单位

百分比布局特点宽度自适应 高度固定

适配方案

rem

vw/vh

rem

目标：能够使用rem单位设置网页元素的尺寸

rem单位

相对单位

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

1rem = 1HTML字号大小

rem移动适配

目标：能够使用rem单位设置网页元素的尺寸

​ 媒体查询

通过媒体查询设置差异化css样式

写法

flexible

使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比例缩放效果

补充知识

/* 字体图片以一种文字设计 ，只能设计字体大小 */

屏幕适配

px是绝对单位

设计稿 大小是375px 里面有一个元素 盒子div 大小是100*100

• a/b=c/d
• 1，要适配的手机的宽度 a 未知
• 2.设计稿的宽b
• 3.要适配的手机的中的div 的宽度c
• 4.设计稿中的div 宽 d

要适配的手机的屏幕（100vw）/设计稿的宽度（375） = 要适配的手机中的div宽度/设计稿的div的宽度