页面布局怎么自适应手机大小

[qq_39224624]

这个是一个登陆页面，用表格写的，怎么才能自适应手机大小呢？求大神讲解

[llllws12]

使用rem

[大脸猫baby]

用100% 或者rem 写 记得头。部引用一楼给的就可以啦 超级无敌简单！

引用 1 楼 qq_29594393 的回复:

media 媒体查询 ,当页面宽度小于某个值的时候调整显示方式,适配手机端,一定要设置 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 禁止缩放.

[qq_39224624]

引用 4 楼 hsywan的回复:

用100% 或者rem 写 记得头。部引用一楼给的就可以啦 超级无敌简单！ [quote=引用 1 楼 qq_29594393 的回复:] media 媒体查询 ,当页面宽度小于某个值的时候调整显示方式,适配手机端,一定要设置 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 禁止缩放.

[/quote] 是这样吗？还是不行啊

[qq_39224624]

引用 3 楼 llllws12的回复:

使用rem

怎么弄呢，那body里面那个width和height是绝对还是相对啊

[当作看不见]

media 媒体查询 ,当页面宽度小于某个值的时候调整显示方式,适配手机端,一定要设置 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 禁止缩放.

[qq_39224624]

引用 1 楼 当作看不见的回复:

media 媒体查询 ,当页面宽度小于某个值的时候调整显示方式,适配手机端,一定要设置 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 禁止缩放.

我试了一下不行啊，大神说详细点，我不是做前端的

[wd514354228]

1. 流式布局也就所谓的百分比布局,宽高的单位都设置为% 例如: width:50% 这种 2. 使用rem 如 width:500rem这种 rem是基于html的fontsize的 如果HTML{font-size:30px} 那么一个rem就30px 默认是16px 3. 另外就是在引用1楼给的视口标签的前提下 用媒体查询

body {
	background-color: red;
	width: 100%;
	height: 100%;
}
.base{

}
@media (min-width: 768px) {  //会自动检测窗口宽度 不同的宽度下 引用不同的样式
	body {
		background-color: green;
	}
}
@media (min-width: 980px) {
	body {
		background-color: pink;
	}
}
@media (min-width: 1280px) {
	body {
		background-color: blue;
	}
}