1、把viewport设置成设备的实际像素
在<head></head>
标签中加入:
<meta name="viewport" content="width=device-width,initial-scale=1">
2、对CSS的样式进行分块的设计,分为两种情况:
a.移动端单独使用一套资源时:
直接对css进行编写,在浏览器进行调试的时候切换至手机屏幕进行显示。
b.PC端与移动端使用同一套资源时:
在css中写入:
@media (max-width: 500px) {
css样式
}
这样在屏幕小于500px的时候,使用的都是上面所写的css样式。
在适用多套设备的时候,可以写入:
@media (min-width: 500px) and (max-width: 800px) {
//css样式2
}
这样在屏幕尺为500px到800px的时候,使用的是css样式2。