1.media query
https://www.smashingmagazine.com/
http://js.jirengu.com/xunacepalu/1/edit
http://js.jirengu.com/zubumipoce/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="style.css" media="(max-width:320px)">
</head>
<body>
</body>
</html>
<style>
body{
background: black;
}
<style>
2.学会要设计图(没图不做)
实在要做也行 丑可别怪我
要到多份终端的设计图
Mobile first 先做手机 (推荐)
Desktop first
3.学会隐藏元素
http://js.jirengu.com/boyamazomu/1/edit?html,js,output
http://js.jirengu.com/yavivuyivi/1/edit?html,css,output
http://js.jirengu.com/nawibatepa/1/edit?html,css,output
newindex.html
{{ if userAgent.text(/iPhone/)}}
{{ = render 'iphone_index.html'}}
或者 redirect_to http://m.taobao.com
{{ else }}
{{= render 'pc_index.html'}}
{{end}}
对应构建iphone.html
对应构建pc.html
响应式 用的很少
375 模拟980px
document.documentElement.clientWidth
4.meta
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
5.手机端的交互方式不一样
没有hover
没有touch事件( user滑动 记录两次的位置 jquery-swipe vue swipe )
没有resize
没有滚动条
手机上没有ie
网友评论