1、PC端和移动端用同一套项目：
这种项目需要做响应式布局
这种产品一般都是简单的企业展示站
技术栈：@media
2、CSS常用的单位:
px 像素（固定单位）
em 相对单位，相对于父元素的字体大小设定的单位；
rem （root em）相对于当前页面根元素HTML的字体
大小设定的；
%
deg
s / ms
3、px的理解：
1、像素是由设备的分辨率决定的；
px.png
4、REM响应式布局开发
/**
* 第一步：拿到设计稿后（现在的设计稿一般都是750PX的），
* 我们设定一个初始的REM和PX的换算比例（一般设置为
* 1rem=100px, 为了方便后期换算）；
*
* 第二步：测量出设计稿中元素的尺寸（PS测出来的是PX单位），
* 在编写样式的时候全部转换为REM单位（除以100即可）；
*
* 第三步：编写一段JS，获取当前设备的宽度，让其除以设计稿的
* 的宽度750，再乘以初始的换算比例100，计算出当前设备下，
* 1rem 应该等于多少像素（只要改变HTML的font-size就可以）：
* 这样HTML字体大小一改，之前所有以rem为单位的元素都会跟着
* 自动缩放；
*
* 真实项目中，主体响应式布局以rem为主，部分效果实现可以基于
* flex来做，需要样式微调整还是基于 @media 来完成
*/
网友评论