网页在不同的分辨率下始终居中显示

最新推荐文章于 2020-12-28 21:14:52 发布
原创 最新推荐文章于 2020-12-28 21:14:52 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML

本文介绍了一种简单的方法来确保网页在不同分辨率下始终保持居中显示。只需将body的宽度设置为当前屏幕分辨率的宽度，并将margin设为0 auto即可。

如果不对网页整体进行特定的设置，网页在不同分辨率下显示的效果（居左，比较难看）不尽人意，那么怎么解决呢？

只需要进行如下设置即可：（我的原先的显示屏分辨率是1366px*728px）

<body style="width: 1366px;margin: 0 auto">

这样能够实现网页在不同的分辨率下始终居中显示！

基于vue的大屏实现弹窗水平垂直居中，点击弹窗外围自动关闭弹窗
m0_51277853的博客
08-09 1503
利用绝对定位定义一个最大的盒子(.big_content)，让其完全覆盖屏幕，再在其中写弹窗，弹窗的水平垂直居中通过对(.big_content)进行flex布局实现。 阻止点击事件冒泡触发
网页在不同分辨率下保持同一显示效果做法种种
07-01
网页在不同分辨率下保持同一显示效果做法种种
网页在不同分辨率下保持同一显示效果的方法
04-23
网页在不同分辨率下保持同一显示效果的方法
使自己的网页在任何分辨率的显示器上都居中显示
tykw163的专栏
05-05 1315
      满屏现在大部分是1024*768，不过为了满足800*600的用户浏览需要，现在的网页大部分做成了居中的，这样在800*600下差不多是满屏的，而在1024*768下是居中的，居中的网页大小一般宽为760-780像素，如果要使网页居中，可在网页代码和之间加入即可！
前端面试练习-CSS实现固定宽高的div在不同分辨率屏幕上下左右居中
艾米栗的代码天地
02-06 717
绝对定位方案 div{ width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; //元素高度的一半 margin-left: -100px; //元素宽度的一半 } 刚开始的时候不理解为什么设置了50%，还要...
jQery使网页在显示器上居中显示适用于任何分辨率
09-04
标题中的“jQuery使网页在显示器上居中显示适用于任何分辨率”指的是使用JavaScript库jQuery实现一个网页布局策略，确保网页内容无论在何种分辨率的显示器上都能保持居中对齐。这种方法对于提升用户体验至关重要，...
Js控制弹窗实现在任意分辨率下居中显示
10-27
在进行网页开发时，常常会需要创建弹窗，并且需要让弹窗在任何分辨率下都能够保持居中显示。这个问题看似简单，但要完美实现却有不少难点。关键在于，不同的浏览器窗口大小、不同用户的显示器分辨率以及不同的操作...
html页面不同分辨率下居中显示同样效果
weixin_30896825的博客
02-10 687
本篇文章对于一些刚步入web前端的小伙伴可能会有很大帮助刚步入前端的小伙伴经常会遇到这样一个问题：我们写好的页面，在不同分辨率下，显示就不如人意了。出现这种问题的主要原因就是页面在当前分辨率下，使用了定死的宽度或者统一浮动到了左侧，这样放在大的分辨率下，整个页面会出现整体向左的现象，解决这种问题有两种方案：1.使用包裹标签，内容的标签使...
大小屏幕分辨率的居中
xkf520的专栏
01-27 643
#main{ width: 600px; margin: 0 auto; } 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。 唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...
pc显示器分辨率 前端_css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)...
weixin_36065817的博客
12-28 572
有时候我们在写页面中，会发现绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，似乎父级的相对定位并没有起了作用。首先要明白如下几个原理：1、笔记本电脑的分辨率一般为1366*768附近，PC电脑的分辨率一般为 1920*1080；以下为常见电脑分辨率：当写网页时，如果在1920这样的大分辨率写好之后，再去小分辨率的笔记本看同样的这个网页，会发现，笔记本电脑显示的基本为...
前端页面适应不同屏幕分辨率常用做法
best_piper的博客
04-16 1万+
前端开发的工程中一般都要考虑到不同的电脑分辨率的问题，由于这段时间我也遇到了这个问题，今天进行一下相关的总结。 一、不同的页面调用不同的CSS文件 这个方法给人的第一感觉可能比较繁琐冗杂，其实实际工作量并没有看起来的那么大。 页面的整体样式肯定基本上是相同的，不同的浏览器我们要做的只是对页面中的元素的位置、大小等进行细微的调整； 整个的页面样式设计已经完成了，其他的直接复制整体样式进...
大尺寸网页在小分辨率显示器上或小窗口上的居中显示
u010289111的专栏
01-20 1951
最近一直加班，加班，不开心。 做了一个页面是1920px的，有两种方式可以使屏幕居中显示。 第一种 body{   text-align:center;    overflow:hidden;    margin:0 auto; } 我做的网页不是直接一个下来的。里面用到了posittion的absolute和relative，然后打开一看什么鬼，错位了啊。 找到了一种比
页面内容跟随屏幕分辨率，不随窗口缩放而变化
Prince_fmx的博客
09-14 1万+
思路： 1，获取当前屏幕分辨率的宽度，高度一般情况下不用考虑,将当前页面body的宽度设为获取到的屏幕分辨率的高度。 代码: var maxWidth=window.screen.width; var maxHeight=window.screen.height; $("body").css({"width":maxWidth}); 2,根据1的步骤，如果你的页面排版的时候没有设置
如何使网页自适应电脑屏幕分辨率?
热门推荐
Luqing的专栏
07-05 13万+
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。 　　第一种方法：做一个网页解决问题（长了点） 　　如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们
为何网页在不同分辨率下会有显示错位？
最新发布
08-22
网页在不同分辨率下显示错位的原因通常与页面布局方式和元素定位方式有关。绝对定位是导致错位的主要原因之一，因为绝对定位的元素是相对于其最近的定位祖先元素（即设置了`position:relative`、`absolute`或`fixed`的祖先元素）进行定位的，而不是相对于浏览器窗口本身[^1]。如果未正确设置定位上下文，那么在不同分辨率下，元素的位置可能会发生偏移。 ### 错位的原因 1. **绝对定位未设置相对定位的父元素**：当使用`position:absolute`时，如果没有为父容器设置`position:relative`，则定位基准可能会不一致，导致在不同分辨率下错位。 2. **固定宽度布局**：如果网页采用固定宽度设计，而未根据屏幕尺寸调整布局，也可能导致内容在不同分辨率下无法正确对齐。 3. **未考虑响应式设计**：缺乏响应式设计会导致页面元素在不同设备上无法自适应，从而出现错位或布局混乱。 ### 解决方案 1. **正确使用定位上下文**：为绝对定位元素的父容器设置`position:relative`，以确保绝对定位元素始终相对于该容器进行定位[^1]。 ```css .contentArea { position: relative; width: 910px; overflow: hidden; } #linkad { position: absolute; top: 31px; left: 0; width: 908px; height: 20px; background: #ECE9E1; } ``` 2. **使用响应式设计**：通过媒体查询（`@media`）实现不同分辨率下的自适应布局，确保网页在各种设备上都能正常显示[^3]。 ```css @media (max-width: 767px) { /* 小分辨率设备样式 */ } @media (min-width: 768px) and (max-width: 991px) { /* 中等分辨率设备样式 */ } @media (min-width: 992px) { /* 大分辨率设备样式 */ } ``` 3. **动态调整页面滚动位置**：如果希望页面在加载时自动居中显示，可以使用JavaScript动态调整滚动条位置[^4]。 ```html <body onload="window.scrollTo((document.body.scrollWidth - document.body.offsetWidth) / 2, 0)"> ``` ### 布局建议 - **使用Flexbox或Grid布局**：这些现代布局技术可以更灵活地控制页面结构，避免因分辨率变化导致的错位问题。 - **测试不同分辨率下的表现**：可以通过调整显示器的分辨率或使用浏览器插件（如Firefox的Web Developer插件）来模拟不同设备的显示效果[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值