响应式

响应式

需要设置viewport

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

width=device-width 表示显示当前视窗宽度

initial-scale=1.0 表示显示当前大小不进行缩放

user-scalable=no 表示不允许用户手动进行缩放

@media screen and (max-width: 1000px) and (min-width: 400px) { }

max-width 当前视窗宽度小于1000px

min-width 当前视窗宽度大于400px