如何使div的位置随浏览器窗口缩放大小比例变化????

我觉得只能这么简单粗暴了,是哪里出现了问题?

你们看效果是两边都有空白,应该怎么做呢?

应该是body存在margin,重置下应该就好了

既然有三个赞了,那就优化下答案。

楼主出现的这个问题是默认的样式所引起的,而reset.css就是为了一致化浏览器排版效果。

如果需要reset.css,可以看看下面的链接,这是很久之前start的资源。


你需要清除默认样式,网上有很多reset.css可供参考

body默认有margin,所以你需要在开始写css的时候先清除一下默认样式,建议使用

直接*{padding:0 margin:0}格式化可以解决问题 但是性能不是最佳 小项目可以 大项目建议想京东淘宝那样

很多标签存在默认样式,把默认的样式设置

ps:当然,这样玩只是一个治标不治本的方式,按照正常的情况来看(考虑整个项目排版),楼上的n多去除浏览器默认样式的答案都是正确可行的。

快速修改的方法就是清除默认样式

当然这种东西还是不够全面,无法在多个浏览器中使默认样式相同,这时候就需要一个重置的css库,利用这个库可以重置浏览器样式并且使你的css代码在各个浏览器中展现的效果相同。
楼上已经有人贴reset.css了这里我就不放上来了

以上是 的全部内容, 来源链接:

  • 背景颜色在那里你可以看到它是如何工作的。将此代码复制到文件中,然后在浏览器中打开它。尝试使用CSS,看看会发生什么。

    尝试删除h1 { ... } CSS块,看看会发生什么。您可能会注意到布局以奇怪的方式作出反应。这是因为h1元素正在影响其容器的布局。您可以通过在容器或正文上声明overflow: hidden;来防止这种情况。

  • 不论是pc端还是手机端浏览器放大缩小(宽度变化)使图片高度展示为宽度的四分一,超出只显示最中间部分

  • 一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签。喜欢的朋友可以看看

  • 如下所示: 当浏览器窗口发生该表示,会触发resize函数 // 浏览器大小发生变化时,给id为main-container的容器设置最小高度 ...以上这篇Jquery根据浏览器窗口改变调整大小的方法就是小编分享给大家的全部内容了

  • 换句话说,通常body的高度并不是浏览器窗口高度的,所以你对下面的元素设置height:100%,并不能充满屏幕高度 那我们怎么解决呢,其实很简单。 请看代码: /*清除默认边距*/ *{ margin: 0; padding: 0; } /*设置/p/5c731b782f5e

  • 设计页面主页,顶端摆放菜单,且菜单用float自左至右设置了三个div:logo、nav、account。在浏览器缩小时,出现了很多问题,依次解决如下。1、现象:窗口缩小,菜单内容完全错乱。解决办法:为三个内层浮动的div设置...

  • CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。 当宽度小于300时,背景色变成淡蓝,否则淡绿色 1.用手机浏览:H5移动端app 2.用电脑浏览:宽度大于300,宽度小于300

  • 问题: 在项目设计中往往在浏览器全屏下设置好布局后当改变浏览器窗口大小时,某些组件会出现overflow的现象。 解决方法 在模板的最外层div在设置组件的最小宽度min-width。 ...

  • 本人小白,现在做一个小的Web项目,使用的是ExtJs,但是页面的显示样式和布局有问题,页面中的内容显示不全,也不能随着浏览器窗口大小改变显示内容。 求大神告知。下面是页面!![图片说明]...

  • 今天用做网页的时候,需要其他网页上的图片,用snipaste工具截取图片,并量好图片的尺寸后(假设width:600px,height:400px),用vscode编写CSS代码,引用以上测量结果设置宽度和高度,打开浏览器后发现图片是width...

  • Div设置最小宽度,下面针对两种情况:body里有浮动元素、当浏览器宽度小于了1350之后,为大家详细介绍下具体的应付方法

  • css设置div随着窗口大小变换的方法:首先新建一个div,并设置初始化样式;然后给div添加transition...设置div随窗口大小改变而发生样式变换,可以使用css3的媒体查询来实现!css设置div随着窗口大小变换1、新建一个...

  • 浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据...

  • 两个echarts图表并排,当浏览器宽度发生变化时,图表动态变化,当宽度很小容纳不下两张表时,切换成上下排布

  • 小白心得今天在做页面的时候发现当我把浏览器窗口缩小的时候,里面的控件溢出我想要的边界了,然后我到之前在网上看到的所谓“自适应”这个词语,我查了一下这个“自适应布局”,它又叫做响应式布局,主要是针对页面...

  • 给外部选择器加个最小宽度,用在哪里都一样 min-width:1366px;

  • 头行、脚行和中间部分的最小宽度可设,当浏览器视窗宽度大于此值时,按比例增长,中间部分划分为三栏,三栏宽度比例固定,但宽度皆不固定,览器视窗宽度变化而变化,三栏的高度固定。 2.代码如下:       ...

  • 题意大意:创建一个正方形,其边长定位相对浏览器窗口宽度变化而变化。 实现思路:本次实现主要应用padding-bottom(或padding-left)属性值等于width(或height)来实现等边长的矩形(即正方形)。 大致效果...

  • 我给二维码,和下面文本固定位置

    css(分别给他们设置了position:absolute)但是没有给他们的父级设置相对定位,这时他们以body为相对定位,没有改变窗口的时候一切都好好的

    全部都皱成一团,那我们这时也可以给body设置一个最小高度和最小宽度避免出现这种情况,但是给body设置会造成很多不便的情况,比如我们又要往里面添东西,这时整个页面显得非常的限制

    所以我们就给它的父级添上相对定位,和最小宽度,最小高度避免这种情况的出现

    页面就会出现滚动轴,避免父级高度不够出现刚才皱成一团的情况

    我要回帖

    更多关于 div宽度根据窗口自适应html 的文章

     

    随机推荐