[英]How can I adjust div elements so that the website looks the same on devices of different screen sizes?
I have a website where I periodically add boxes (div elements called post-it) to a larger div element(called section) which has a width of 100%.我有一个网站,我定期将框(称为便利贴的 div 元素)添加到宽度为 100% 的较大 div 元素(称为部分)中。 The section element is the whole of the website aside from the headers of the website. section 元素是除网站标题之外的整个网站。 I have used absolute positioning for the boxes and I set their location on the website based on top and left pixels.我对这些框使用了绝对定位,并根据顶部和左侧像素设置它们在网站上的位置。
.section{
width: 100%;
height: 1000px;
margin: 0 auto;
background-repeat: repeat-y;
background-size:contain;
background-color: #8B8B8B;
}
.post-it{
height: 100px;
width: 100px;
font-family: 'Monte', sans-serif;
font-size: 25;
padding-top: 56.25%;
}
<header>
<p>Sample header of webpage</p>
</header>
<div class="section">
<div class = "post-it" style = "position: absolute; top: 640px; left: 20px;">
.
.
.
<div class = "post-it" style = "position: absolute; top: 1450px; left: 870px;">
.
(arbitrary amount of post-its added at different times)
</div>
<footer>
<p>Sample footer of webpage</p>
</footer>
When I am on my laptop, I can add a box to the rightmost section of the larger div element and the website display will not be disrupted.当我在我的笔记本电脑上时,我可以在较大的 div 元素的最右边添加一个框,并且网站显示不会被打乱。 However, when I refresh the same page on my phone which has a smaller screen, the whole website is shrunk to the top-left of the browser window and the post-it is idle on a white background which is not part of what I coded.但是,当我在屏幕较小的手机上刷新同一页面时,整个网站缩小到浏览器 window 的左上角,并且便利贴在白色背景上闲置,这不是我编码的一部分.
Also, when I adjust the browser window on desktop, some post-its are cropped out.另外,当我在桌面上调整浏览器 window 时,一些便利贴被剪掉了。 For reference, I did not use a table on the website for layout.作为参考,我没有使用网站上的表格进行布局。 How can I adjust the div elements so that the website looks the same on devices of different screen sizes?如何调整 div 元素以使网站在不同屏幕尺寸的设备上看起来相同?
Updated - hardcoding positions更新- 硬编码位置
.section
should have position
set to relative
to specify that absolute
positioned child elements are anchored to it. .section
应该将position
设置为relative
以指定absolute
定位的子元素锚定到它。 You can then try using percentages to ensure the location of child elements stay within .section
on different viewports.然后,您可以尝试使用百分比来确保子元素的位置保持在不同视口上的.section
内。
However, there is no way to ensure that absolute
positioned elements will maintain intended positions without overlapping other elements on differently sized viewports when solely using inline styles and absolute positions.但是,当仅使用内联 styles 和绝对位置时,无法确保absolute
定位的元素将保持预期位置而不与不同大小的视口上的其他元素重叠。
If you must use absolute positioning, you will need to create ids for each .post-it
that you hardcode into the HTML.如果必须使用绝对定位,则需要为硬编码到 HTML 的每个.post-it
创建 id。 Then, in your styles.css
, specify media queries for different viewport sizes.然后,在您的styles.css
中,为不同的视口大小指定媒体查询。
I made a demonstration of media queries and absolute positions here: https://codepen.io/sevanbadal/pen/ExjBKEg我在这里演示了媒体查询和绝对位置: https://codepen.io/sevanbadal/pen/ExjBKEg
This is very tedious because you must hardcode new id
s for each .post-it
.这非常乏味,因为您必须为每个.post-it
硬编码新的id
。 Then in the CSS you add the id to each media query that you specify.然后在 CSS 中,将 id 添加到您指定的每个媒体查询中。
Original Response - using flex layouts原始响应- 使用弹性布局
You can use a CSS Flexbox layout.您可以使用 CSS Flexbox 布局。 Check the Mozilla CSS Flexbox documentation for details.查看 Mozilla CSS Flexbox 文档了解详细信息。
For your problem, apply flex to your "section" class.对于您的问题,请将 flex 应用于您的“部分”class。 Then use justify-content to adjust how the arbitrary number of divs will appear inside the flex layout.然后使用 justify-content 来调整任意数量的 div 在 flex 布局中的显示方式。 Flex-wrap can also be used to break the content of the flex-layout into multiple rows. Flex-wrap 也可以用来将 flex-layout 的内容分成多行。
You will probably want to remove/change the padding from.post-it.您可能希望从.post-it 中删除/更改填充。
Try this code on.section:在.section 上试试这个代码:
.section{
width: 100%;
height: 1000px;
background-repeat: repeat-y;
background-size:contain;
background-color: #8B8B8B;
display: flex;
flex-wrap: wrap;
}
And this for.post-it而这个 for.post-it
.post-it{
height: 100px;
width: 100px;
font-family: 'Monte', sans-serif;
font-size: 25;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.