- 纯css实现响应式布局(媒体查询)
设置 Meta 标签,在标签里加入meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
容器尽量使用相对尺寸:百分比替代px
文字大小尽量使用em、rem
图片尽量使用相对尺寸,尽量避免使用绝对尺寸
页面布局尽量使用流式布局:float,好处:如果宽度太小,后面的元素回自动添加到前一个元素的下方,不会在水平方向溢出,避免水平方向出现滚动条。
响应式页面必须使用媒体查询
@media 类型 and (条件1) and (条件二)
{
css样式
}
//举个栗子
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}
或者第二种媒体查询方法,使用link连接,media属性用于设置查询方式
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
-
js实现响应式布局
//浏览器大小发生改变时触发的函数
window.onresize = function(){
var browserWidth = document.body.clientWidth;//获取浏览器可视区域的宽度。
if(browserWidth<1200){//当浏览器可视区域小于1070时触发
$(".ficrm-form-ele-3").css(“width”,“100%”);
$(".ficrm-form-ele-2").css(“width”,“100%”);
if(browserWidth<625){
$(".searchDiv").css({“margin-top”:“10px”,“margin-left”:“20px”});
}else{
$(".searchDiv").css({“margin-top”:“0px”,“margin-left”:“20px”});
}
}else{
$(".ficrm-form-ele-3").css(“width”,“33%”);
$(".ficrm-form-ele-2").css(“width”,“50%”);
$(".searchDiv").css({“margin-top”:“0px”,“margin-left”:“20px”});
}
} -
label 标签
label与input一起用,可以用label代替checkbox,让input display:none,点击label标签与点击checkbox效果相同,可以控制其他的元素的显示与隐藏,还可以设置babel的样式、大小、位置等。