缩放页面不影响布局方法

缩放页面不影响布局1、类似百度布局（1）布局时在最外面套一层div，然后给这个div赋一个固定的长宽就可以了。<body><div id="main"></div></body>css代码：#main{width:1000px;height:500px;MARGIN-RIGHT: auto;MARGIN-LEFT: auto;}2、类似百度布局（2）

孛儿只斤·苏日娜

11133人浏览 · 2020-08-24 11:38:44

孛儿只斤·苏日娜 · 2020-08-24 11:38:44 发布

缩放页面不影响布局

1、类似百度布局（1）

在这里插入图片描述
布局时在最外面套一层div，然后给这个div赋一个固定的长宽就可以了。

<body><div id="main"></div></body>

css代码：

#main{
	width:1000px;
	height:500px;
	MARGIN-RIGHT: auto;
	MARGIN-LEFT: auto;
}

2、类似百度布局（2）

<div style="min-width:1050px;min-height:100px;margin-right:5%;margin-left:5%">
	// 页面布局
</div>

3、任意分辨率下页面平铺，缩放到一定宽高出现滚动条

<body><div id="main"></div></body>

css代码：

 html,body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
}

body {
    min-width: 1024px;
    min-height: 600px;
    user-select: none; /* 禁止鼠标拖动页面时选中页面文字 */
}

#main {
    width: 100%;
    height: 100%;
}