动态rem

响应式

1.meta：vp阻止缩放

width=device-width记住viewport是视口
user-scalable =no禁止用户缩放
initial-scale=1.0初始缩放倍数1.0

2.尽量不要写width/height,改用max/min
不要把宽高写死，使用最小宽度和最大高度
3.flex布局
尽量使用flex布局
4.media query
尽量使用媒体查询，给不同的宽度，使用不同的样式
移动端和PC端的一些区别

• 没有hover 所以尽量少使用hover,可以在PC端改为移动端时少修改代码
• 有touch事件 移动端是可以触摸的，所以需要使用touch触摸监听
• 没有resize 移动端的宽高无法更改，宽高为设备的宽高
• 没有滚动条
• **移动端需要设置滑动事件 原生js没有滑动事件，包括jQuery，Vue等框架都封装的有swipe事件可以实现滑动效果

动态rem 非响应式的移动端开发

动态rem不是响应式 只针对移动端方案
原因：手机尺寸问题，长宽高不相同
px:像素
rem :root em 表示根元素的font-size，根元素一般指
em:一个”M“的宽度(一个汉字的宽度）
vh:viewport height ,50vh表示视口高度的一半
vw:viewport width,50vw表示视口宽度的一半

• 网页中：一般默认字体宽度为16px
  在chrome浏览器中，默认最小字体大小为12px设置更小的字体大小也不会有任何效果
  手机浏览器不会限制最小值

关于rem和em

html{
     font-size:32px;//相对于html的font-size
}
body{
    font-size:16px;
    height:2em; //此时高度为32px
    
    height:2rem://此时高度为64px

为什么使用动态rem

在PC端中方网页可知道大概要写多少宽度的，在移动端，每款手机屏幕分辨率不一样，宽度的大致范围在300px和500px之间，细微的差别是很明显的，只要没做好适配，就很难优雅的向用户展示网站效果
动态rem就是保持每个元素的宽高比例不变，根据设备的宽高将元素整体放大或缩小

动态rem的使用

• 动态rem的思路：一切单位以设备宽度为基准，保证完美的还原设计稿
• css中我们无法获得当前设备的宽度，所以需要在JS中写
  可以在JS中写10rem = 1pageWidth

var pageWidth = window.innerWidth
document.write('')

• 注意：比如font-size，border之类的值比较小了，建议使用px像素，rem和px是可以混用的