关于移动端页面
通常来讲做移动端页面适配一般有三种方式
- 前端方向:移动页面响应式,用媒体查询(media query).针对不同分辨率设备进行不同页面的适配
做一个简单的nav做一个响应式布局:代码 展示
缺点:当页面复杂时,浏览器加载会加载大量的其他页面的代码,性能下降. - 后端方向:根据访问的user-agent来判断用户的设备来渲染不同的html,这样做的网页有 知乎
- 后端方向:根据访问的user-agent来判断用户的设备来跳转到不同的域名,这样做的网页有 淘宝, 淘宝触屏版
关于响应式
- 要学会使用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;
}
}
- 手机端需要加一个meta
- 因为大多数网页是980px左右宽,最初的手机通常没有这么宽的像素,手机会自动用手机像素模拟980px,而这一习惯被保留下来,所以需要加一个meta使得网页不被初始化的时候不被缩小或放大,也不能被用户缩小放大
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
- 手机端交互与pc端的区别
- 无hover
- 有touch事件,可以搜vue swipe,jquery swipe用现成的库
- 无resize
- 无滚动条(或者叫隐藏滚动条)
- 在写响应式页面的话如果优先写移动端的话叫mobile-first,优先写桌面端叫desktop-first
