html怎么解决窗口改变元素错乱的问题?

窗口改变元素全乱套了,如何让它在窗口改变的时候元素不错乱

可以使用多种布局方法。
1. 使用rem单位,窗口改变时,js修改顶层像素尺寸。
2. js整体缩放窗口,动态改变transform的scale值。
3. 使用css媒体查询,动态更改字体大小,配合grid、table或flex布局。
4. js动态更改meta的设备缩放值。
5. 使用百分比单位,按照窗口百分比缩放。
6. js动态改变所有尺寸单位。
完美的方案都需要js配合。
温馨提示:内容为网友见解,仅供参考
第1个回答  2020-07-16

可以用css的display: flex盒布局实现,每次更改页面大小时会自动调整分割盒子的大小,其次还有media媒体查询,可以对某些宽高进行ui重排版,还可以对某个设备中的某个宽高进行排版,再其次就是用JavaScript的widnow.onresize窗口大小改变事件函数实现,在改变宽高的时候改变css

注:用JavaScript虽然很灵活,但是用起来也很麻烦,还不如用media媒体查询

再其次就是一栏布局,一栏布局是最简单的流布局,但也不太美观(指在大屏设备上,如果是小屏设备就是推荐的方案了),css中还有个display:box,该属性是很早前浏览器支持的功能与display:flex类似的属性,现在使用需要加前缀才能完全兼容,望采纳。

第2个回答  2020-07-16
这个需要做好页面自适应的,各种分辨率的屏幕给不同的样式。多去了解下盒子模型、栅格布局等原理。
第3个回答  2020-07-16
父元素定义为固定像素宽度 或者给不同屏幕写不同的css布局样式
第4个回答  2020-07-16
关于题主的问题不做过多累述,建议去自学栅格布局,看明白了这个问题就解决了。正所谓授人以鱼不如授人以渔,希望能帮到你。

求HTML指教,当浏览器窗口大小变化时,如何让内容布局不变
如果想要保持布局不变,可以给该元素(如div)设置最小宽度属性。在网页中,如果一个元素没有设置最小宽度(min-width),这时当浏览器缩小到一定程度时,元素中的布局可能会发生变化。设置代码如下:<html> <head> <title>主页面<\/title><style>body{ margin:0px; width:1350px; min-width...

css样式变化一下窗体大小样子就全乱了,怎么办
所以元素参照文档(你可以理解为窗口),所以窗口变化元素位置就都变了 你要在外层加一个元素,扩上你body以内的所有标签,然后给它设定position:relative;然后参照这个元素调整一下里面的布局。就不会有文档缩放,元素变位的问题了

浏览器缩小网页的元素位置就会改变的问题怎么解决?
您不要直接这么写,直接这么写肯定要换行了 您可以将其放置在一个table表的两个单元格中 或者说放置在div中,设置好div的宽度 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><input type="text" size="60" \/><\/td> <td><input type="button" value="按钮" style="wid...

html用div标签并列3段式排列的问题
在HTML中,使用div标签并列排列三段内容时,常常会遇到背景错位的问题。为了解决这个问题,可以尝试给div添加CSS样式。首先,可以尝试使用“zoom:1”和“overflow:hidden”这两个属性。“zoom:1”是一个用于控制元素内元素布局的属性,它可以解决元素内部元素布局不正确的问题。在并列排列三段内容时,如果...

Html新手入门常见小问题及解决方法
1, 把父元素设置一个高度就ok 2, ⽗元素后⾯设置一个空元素并设置清除浮动 clear:both;也是ok的 3, 给父元素设置一个overflow:hidden;也是可以的 4, 还可以通过伪元素来解决(注意不是伪类),在css里写上其样式,通过CSS伪元素在容器内部元素最后添加了一个看不见的点“.”...

ultraedit窗口布局乱了,怎么弄回来
height: 100px; } <\/style> <\/head> <body> <div><\/div> <div><\/div> <\/body> <\/html> 当你把这段代码放在浏览器并且把浏览器窗口的缩小到1000px时就会往掉,解决方法:只需在浮动的父级元素中添加下面的一个固定的元素包含着就可以:<!DOCTYPE html> <html lang="zh-cn"> <head> ...

改变浏览器窗口宽度 页面元素自动往下跑
c">这又是一个DIV<\/div> <div id="MainDiv"> <div id="content_a"><div id="content_e"><\/div><\/div> <div id="content_b">MB5U.com 这是第二个DIV<\/div> <div style="clear:both;"><\/div> <\/div> <div id="content_d"><\/div> <\/div> <\/body> <\/html> ...

我用HTML中div+css写的网页,有的IE支持,有的IE就不支持,Goole直接错位...
请在ie下 测试,仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了?要素:doctype必须有,ie6、ie7下margin-top:19px还好好的,margin-top:20px 就出问题了,无法解释。。。大家还可以将 clear 层换不同的位置测试。解决方案:给ul 属性zoom:1 (给li 加zoom:1 没用)引申:clear...

在html5中移动一个元素怎么让另一个元素不会移动
只有用定位的属性 网页里想要随意调整一个元素的位置并且保证对其他的元素没有影响,就只有定位的属性了 当然,也有这种可能--两个元素分别给,float:left;float:right;的属性,同时这两个元素都很小,一个在最左边,一个在最右边,那么你稍微调整位置,用margin属性,也是不会影响到另外一个元素的 ...

如何使div的位置随浏览器窗口缩放大小比例变化???
要使元素的位置随着浏览器窗口的缩放大小比例变化,你可以使用 CSS 中的相对定位和百分比单位来实现。以下是一种常见的方法:HTML:CSS:.my-div { position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50%;height: 50%;background-color: #f0f0f0;} 在上面的...

相似回答