当你在动的时候,页面也在变化,这就是“响应式”。
一、学会 media quer
- 直接在HTML的
<style>
标签内写:
@media (查询条件1) and (查询条件2) ...{
CSS样式设置
}
复制代码
- 写在
<link>
标签里:
<link rel="stylesheet" href="style.css" media="(max-width:320px)">
复制代码
所有的响应式都是使用媒体查询实现的。
要注意优先级问题,避免被不合适地覆盖,最好是设定查询条件时就消除交集部分。
二、学会要设计图(没图不做)
实在要做也行,丑可别怪我
- Mobile first
- Desktop first
三、学会隐藏元素
四、手机端要加一个 meta
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码
五、手机端的交互方式不一样
- 没有 hover
- 有 touch 事件--swipe
- 没有 resize(浏览器窗口大小没办法改)
- 没有滚动条(隐藏的滚动条)