媒体查询
例:
/* 如果浏览器宽度是325-800之间她就会应用 background:red这个样式 */
@media (min-width:325px) and (max-width:800px){
body {
background:red;
}
}
@media (条件){
选择器 {
样式
}
}
/* 学会使用display:none 和 display:block*/
手机端要如下设置
响应式:目前国内市场是如何处理响应式? > 设计两套HTML pc_index.html / mobile _index.html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
需要注意的是:手机端的交互方式不一样
- 没有 hover
- 有 touch 事件
- 没有 resize
- 没有滚动条
😄Tips:vue / jquery swipe 封装好了滑动事件