CSS深入浅出-移动端页面(响应式)
2019-01-10 本文已影响17人
酒极子
本博客主要讲移动端页面(响应式)的注意点
"media query"媒体查询
媒体查询是对你的媒体进行某些条件的查询
格式：
-
<style>里直接写
@media(查询条件){
//当满足查询条件后的样式
//例如：
body{
background:red;
}
}
- 用
<link>链接css文件替代
<link rel="stylesheet" href="xxx.css" media="(条件)">
注意点
- 写CSS样式时，后写的媒体查询优先级更高
- 如果某个媒体，当它满足查询条件时，就会应用你写的样式
- 响应式页面的核心就是利用媒体查询功能
学会要设计图(没图不做！)
没图不做是前端的首要原则
- 因为没有图是做不了页面的，前端就是把图片，文字，设计图等材料变成网页的工作
- 给一张图就对应一个平台的页面，所以做响应式至少要把设计图要到两份
做响应式页面时
有两种做法，分别是先做手机版和先做pc版
先后顺序
- 先做手机版(推荐)
专业术语：Mobile first，推荐先做是因为手机用户多 - 先做PC版
专业术语：Desktop first
注意点
- 手机宽度一般在
450px以内 - 实际上最好的方法就是一个元素给两种状态，切换状态用媒体查询去做
- 在相同一个屏幕大小切状态时，用js去做
- 在不同屏幕大小切状态时，用媒体查询去做
不用响应式才是最好的
响应式的缺点
- 响应式页面一点也不实用，只能用来简历或者面试中使用。
- 如果使用响应式，页面就要考虑很多问题，代码多而麻烦。还不如让后端工程师，发两份不同的html和css，分开来发给pc和手机端用户渲染
- 现在只有一些博客和新闻站点还在用响应式网页，因为操作点并不复杂
现在流行的移动端页面方式
- 让后端将代码写成，根据例如"
userAgent"用户机型等信息，发送不同份的html和css，渲染不同的html和css给用户。
例如：知乎，简书
但这不是特别流行的方式 - 更好的方式是直接根据用户机型的不同，直接跳转到不同的网址，拥有完全不同的html和css，这样维护起来也方便
例如：淘宝，京东
手机端要加一个<meta>
代码：
<meta name="viewport" //名字="视口"
content="width=device-width, //宽度=设备宽度
user-scalable=no, //用户能否缩放=否
initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
//初始缩放倍数=1.0，最大缩放倍数=1.0,最小缩放倍数=1.0
历史原因：
- 一开始网页只供给PC
- 诺基亚出现了，但诺基亚不是智能机
有些网站专门用"wep"语言为诺基亚做了网页 - 接着苹果第3代上市了，但它的宽只有
320px，中国的网站都是默认900+px的。 - 苹果公司就想出一个办法，将手机显示的所有网站缩小，用户想看就用两根手指放大
- 所以用手机看的任何网站，都是缩放的，缩放比例是模拟
980px的 - 但是如何告诉浏览器别缩放呢，用上面的代码就行
移动端的特点
- 手机上没有
hover
如果一个交互是用hover去触发的，那么它在手机上会直接失效 - 手机端有
touch事件
2.1 用户在屏幕上摸来摸去的时候，是不会触发滑动事件的
2.2 但是可以利用脚本记录下用户手指的两次触摸(滑动)位置，最终确定用户是向哪滑动的
2.3 现在所有的框架都会帮你封装一个通过触摸事件(touch)模拟的滑动事件，名字叫"swipe" - 没有
resize
移动端浏览器默认是，无法放大缩小屏幕的 - 没有滚动条
只有位置指示器，而且滑动后出现一下就自动隐藏了 - 手机上没有IE
这是一个特别好的消息，所有特别炫酷的CSS属性都能在手机端上用了
