CSS深入浅出-移动端页面(响应式)

本博客主要讲移动端页面(响应式)的注意点

"media query"媒体查询

媒体查询是对你的媒体进行某些条件的查询

格式：

• <style>里直接写

@media(查询条件){
  //当满足查询条件后的样式
//例如：
  body{
        background:red;
      }
}

• 用<link>链接css文件替代

<link  rel="stylesheet"  href="xxx.css"  media="(条件)">

注意点

1. 写CSS样式时，后写的媒体查询优先级更高
2. 如果某个媒体，当它满足查询条件时，就会应用你写的样式
3. 响应式页面的核心就是利用媒体查询功能

学会要设计图(没图不做！)

没图不做是前端的首要原则

1. 因为没有图是做不了页面的，前端就是把图片，文字，设计图等材料变成网页的工作
2. 给一张图就对应一个平台的页面，所以做响应式至少要把设计图要到两份

做响应式页面时

有两种做法，分别是先做手机版和先做pc版

先后顺序

• 先做手机版(推荐)
  专业术语：Mobile first，推荐先做是因为手机用户多
• 先做PC版
  专业术语：Desktop first

注意点

1. 手机宽度一般在450px以内
2. 实际上最好的方法就是一个元素给两种状态，切换状态用媒体查询去做

• 在相同一个屏幕大小切状态时，用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

历史原因：

1. 一开始网页只供给PC
2. 诺基亚出现了，但诺基亚不是智能机
   有些网站专门用"wep"语言为诺基亚做了网页
3. 接着苹果第3代上市了，但它的宽只有320px，中国的网站都是默认900+px的。
4. 苹果公司就想出一个办法，将手机显示的所有网站缩小，用户想看就用两根手指放大
5. 所以用手机看的任何网站，都是缩放的，缩放比例是模拟980px的
6. 但是如何告诉浏览器别缩放呢，用上面的代码就行

移动端的特点

1. 手机上没有hover
   如果一个交互是用hover去触发的，那么它在手机上会直接失效
2. 手机端有touch事件
   2.1 用户在屏幕上摸来摸去的时候，是不会触发滑动事件的
   2.2 但是可以利用脚本记录下用户手指的两次触摸(滑动)位置，最终确定用户是向哪滑动的
   2.3 现在所有的框架都会帮你封装一个通过触摸事件(touch)模拟的滑动事件，名字叫"swipe"
3. 没有resize
   移动端浏览器默认是，无法放大缩小屏幕的
4. 没有滚动条
   只有位置指示器，而且滑动后出现一下就自动隐藏了
5. 手机上没有IE
   这是一个特别好的消息，所有特别炫酷的CSS属性都能在手机端上用了