移动端适配

媒体查询(响应式)

media query:自动探测屏幕类型及宽度，符合条件时加载css样式

1. link元素中的CSS媒体查询

<link rel="stylesheet" href="style.css" media="(min-width: 400px) and (max-width: 800px)">
// 当屏幕大于400px并且小于800px时，引用style.css样式表
复制代码

<script>
    @media( min-width: 400px and max-width: 800px){
        body{
         background: red;
        }
    }
</script>
// 当屏幕大于400px并且小于800px时，引用style.css样式表
复制代码

2. 样式表中的css媒体查询

设计图

• 做移动端页面需要移动端设计图
• 做pc端页面需要pc端设计图
• 没图不要做

meta viewport

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

• viewport表示视口：浏览器可视区域宽度和高度
• width=device-width: 默认网页宽度等于屏幕宽度
• user-scalable: 禁止用户缩放
• initial-scale=1.0: 原始缩放比例为1.0
• maximum-scale=1.0: 最大缩放比例为1.0
• minimum-scale=1.0: 最小缩放比例为1.0

手机端特点

手机端的交互方式与PC端不同

• 没有hover事件
• 有touch事件
• 没有`resize
• 没有滚动条`