编写响应式网站的几点要素
(1) 在HEAD标签中声明viewport元标签
<meta name="viewport" content="width=device-width,init-scale=1,user-scalable=0" />
(2) 不使用绝对的宽度,元素的宽度使用百分比
margin,padding 影响不大
(3) 字体,要使用倍率, em
e.g
body{
font:normal 100% Helvetical
}
div{
font-size:1.5em;
}
(4) 采用流式布局,浮动定位
.test{
float:right;
width:70%;
}
(5) 图片的自适应
img{
max-width:100%
}
此外,还可以修改<base>的href属性值,针对不同的浏览器,指定不同的图片
加载路径
(6) CSS MediaQuery, 使用媒体查询加载不同的css文件
(7) CSS MediaQuery,
<link rel="stylesheet" media="screen and (min-width:980px) and (max-width:1080px) " href="" />
(1) 在HEAD标签中声明viewport元标签
<meta name="viewport" content="width=device-width,init-scale=1,user-scalable=0" />
(2) 不使用绝对的宽度,元素的宽度使用百分比
margin,padding 影响不大
(3) 字体,要使用倍率, em
e.g
body{
font:normal 100% Helvetical
}
div{
font-size:1.5em;
}
(4) 采用流式布局,浮动定位
.test{
float:right;
width:70%;
}
(5) 图片的自适应
img{
max-width:100%
}
此外,还可以修改<base>的href属性值,针对不同的浏览器,指定不同的图片
加载路径
(6) CSS MediaQuery, 使用媒体查询加载不同的css文件
(7) CSS MediaQuery,
<link rel="stylesheet" media="screen and (min-width:980px) and (max-width:1080px) " href="" />