响应式
1.meta：vp阻止缩放
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
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，根元素一般指<html></html>
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('<style>html{font-size:' + pageWidth + 'px;}</style>')
- 注意：比如font-size，border之类的值比较小了，建议使用px像素，rem和px是可以混用的
网友评论