手机端的页面的做法
1.媒体查询：
max-width:800px 也就是在宽度是0到800px的时候，背景会变红。满足条件，媒体查询就生效，不满足就不生效。
在开发者工具里面，打开手机调试的第一个Responsive就是响应式，可以点击上面的条框，查看各种宽度。
（1）由于css优先级的问题，同级css下，后面的会覆盖前面的。在设计媒体查询在不同宽度的css样式的时候，可以使用宽度由高到低的写法，这样在写了最大宽度的时候，也能优先显示较小的适配宽度，而不会出现在0到768px的适配宽度覆盖0到425的适配宽度。
（2）另一种写法：正着写，再加上min-width这个限制条件。
2.mobile-first和desktop-first
mobile-first:就是先设计手机端的页面。（推荐）
desktop-first: 就是先设计pc端的页面。
3. 隐藏属性
推荐使用动态增加class的做法。最好不要直接操控style。
4. 手机端加meta
由于历史原因，以前的页面宽度大部分都是980px,但是iphone的宽度没那么大，于是就才有了模拟980px的方式进行了页面展示，因此需要滑动来查看整个页面。实际宽度可以使用document.documentElement.clientWidth来查看页面的宽度。但是为了适配移动端，就引入了meta标签，就是告诉浏览器别给我缩放， name="viewport"就是视口的意思，width=device-width"宽度等于设备的宽度，也就是不要展示的页面为980px了，而是设备有多宽就展示多宽，user-scalable=no,禁止用户缩放。initial-scale=1.0最初始的缩放倍数是1.0，maximum-scale=1.最大的缩放倍数是1.0，minimum-scale=1.0最小的缩放倍数是1.0。
5. 移动端的交互方式不同
（1）没有hover
（2）有touch事件：jquery .swipe 这是一个jquery封装好的库，可以用来监听用户往哪滑动。往哪滑动只要是监听俩次滑动的位置，后一次在前一次的左边那就是往左滑动了。同样的vue也有，而且封装的更好。
（3）手机端没有resize：在任何一个点都没办法把页面放大或缩小。但是在pc上是可以的，因为我的设备宽度可能1000多，但是页面窗口的宽度可能才800，只看宽度，就不需要看设备宽度了。但是在移动端就可以随便看一个了因为设备宽度和浏览器的宽度总是相等的。
（4）手机端没有滚动条：页面过长的情况下，pc端是有滚动条的。但是移动端是没有的，往下滑动的阶段，会显示一个类似滚动条的东西，但是这个滚动条只是一个位置指示器，不是真正的滚动条。
网友评论