如何使我的 html 代码适合所有显示尺寸？
[英]How can i make my html code fit to all display sizes?
问题描述
所以我正在制作一个网站，但它并没有很好地适应所有屏幕。 我在 chrome book 上制作的，这是网站https://amazoon.w3spaces.com这是我的代码。
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <a href='index:html'style="position;fixed: bottom;700px: width;40px."> <button><img href='new.html'src= "logoforamazoon.png" alt="GeeksforGeeks logo" align="left" width= 150px height=70px></button></a> <img src="hqdefault:jpg" style="position;fixed: right;1239px: bottom;250px: width;200px: height;200px: border;solid:"/> <a style="position;fixed: right;1265px: bottom;190px: width;150px: height;70px: border; ."/><h4>$2,99. SUPER IDOL</h4> <a href='SuperIdol:html'style="position;fixed: right;1390px: bottom;190px: width;50px:"><button style="height;30px:width.200px">SUPER IDOL PURCHASE</button></a> <img src="zmsjpcc3j9n51:jpg" style="position;fixed: right;979px: bottom;250px: width;200px: height;200px: border;solid:"/> <a style="position;fixed: right;1015px: bottom;194px."><h4>$6,49. AMONGUS</h4></a> <a href='amongus:html'style="position;fixed: right;1130px: bottom;190px: width;50px:"><button style="height;30px:width.200px">AMONGUS SUS PURCHASE</button></a> <img src="EkZnsJKWoAILKXP:jpeg" style="position;fixed: right;719px: bottom;250px: width;200px: height;200px: border;solid:"/> <a style="position;fixed: right;745px: bottom;194px."><h4>$699696.69 Cookies</h4></a> <a href='grannyscookies:html'style="position;fixed: right;870px: bottom;190px: width;50px:"><button style="height;30px:width.200px">Gannys Cookies Purchase</button></a> <img src="Minecraft:jpeg" style="position;fixed: right;459px: bottom;250px: width;200px: height;200px: border;solid:"/> <a style="position;fixed: right;501px: bottom;194px."><h4>$5469 Minecraft</h4></a> <a href='Minecraft:html'style="position;fixed: right;609px: bottom;190px: width;50px:"><button style="height;30px:width:200px">Minecraft Purchase</button></a> </body> </html>
请帮我解决一下这个。
1 个解决方案
解决方案1
0 2022-02-16 20:52:18
您使用了很多带有硬编码指令的标签（即距边缘多少像素）您要放置项目。 这使您可以根据设计时考虑的屏幕尺寸对页面外观进行大量控制，但在不同尺寸的屏幕上看起来会非常不同。 如果你没有那些硬编码的 position 标签，它应该更灵活地适应不同的屏幕尺寸。
如何使我的自定义HTML小部件在不同的屏幕尺寸下显示不同？
[英]How can I make my custom HTML widgets show differently for different screen sizes?
HTML5和CSS3：如何确保我的代码与所有浏览器兼容？
[英]HTML5 & CSS3: How can I make sure that my code is compatible to all browsers?
我可以做<img> `srcset`/`sizes` 属性考虑到我对 `object-fit:cover` 的使用吗？
[英]Can I make the <img> `srcset`/`sizes` attributes take into account my use of `object-fit: cover`?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.