学习适配移动端网页

非常简单的笔记

适配移动端网页

1
2
3
4
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width>

<meta name="viewport" content="initial-scale=1">

CSS3和@media媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
@media mediatype and|not|only (media feature){ css }
或者
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="不同的样式表">

//当页面宽度小于500px时使用的样式
@media screen and (max-width: 500px){ }

//当页面宽度大于500 小于 700时
@media screen and (min-width: 500px) and (max-width: 700px){}

//当页面宽度大于700时
@media screen and (min-width: 700px){}

把之前的blog简单增加了适配移动端的代码