缩放页面不影响布局方法

最新推荐文章于 2024-08-17 14:58:02 发布

孛儿只斤·苏日娜

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量1w

点赞数 8

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_44827865/article/details/108194595

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

缩放页面不影响布局

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%;
}

孛儿只斤·苏日娜

关注

8
点赞
踩
47

收藏

觉得还不错? 一键收藏
1
评论
缩放页面不影响布局方法

缩放页面不影响布局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-h
复制链接

扫一扫

专栏目录