关于移动端页面

通常来讲做移动端页面适配一般有三种方式

1. 前端方向:移动页面响应式,用媒体查询(media query).针对不同分辨率设备进行不同页面的适配
   做一个简单的nav做一个响应式布局:代码 展示
   缺点:当页面复杂时,浏览器加载会加载大量的其他页面的代码,性能下降.
2. 后端方向:根据访问的user-agent来判断用户的设备来渲染不同的html,这样做的网页有 知乎
3. 后端方向:根据访问的user-agent来判断用户的设备来跳转到不同的域名,这样做的网页有 淘宝, 淘宝触屏版

关于响应式

1. 要学会使用meida query.

• 可通过引入css的时候应用media query
  <link rel='stylesheet' href='style.css' meida='max-width:320px'>
• 可在css内部写meida query

/*以下为style.css*/
*{
margin:0;padding:0;
}
@media(max-width:320px){  //只有当屏幕分辨率大于320px时才会执行以下内部操作
  body{
  color:red;
}
}

2. 手机端需要加一个meta

• 因为大多数网页是980px左右宽,最初的手机通常没有这么宽的像素,手机会自动用手机像素模拟980px,而这一习惯被保留下来,所以需要加一个meta使得网页不被初始化的时候不被缩小或放大,也不能被用户缩小放大
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

3. 手机端交互与pc端的区别

• 无hover
• 有touch事件,可以搜vue swipe,jquery swipe用现成的库
• 无resize
• 无滚动条(或者叫隐藏滚动条)

4. 在写响应式页面的话如果优先写移动端的话叫mobile-first,优先写桌面端叫desktop-first