css 如何根据显示器屏幕大小自动调整显示区域

Posted 2023-04-16

一般显示为4：3，但是客户要求根据显示器屏幕大小自动调整显示区域，比如16：9。是否应该在CSS上加点代码？还有其他方法吗？谢谢各位达人~

参考技术A 16:9典型的非桌面电脑屏幕，百度：css媒体查询、css相应式web，你客户想要的就是这个东西，实现你这个东西，前面朋友说的：宽度用百分比，是对的。 参考技术B 做两个版本的，一个是4:3，一个事16:9
页面加载的时候用js判断用户屏幕是4:3还是16:9 然后加载不同的css 参考技术C css的话你把宽高用百分比就行了啊 参考技术D 使用宽度百分比，字体用em，或者百分比可以解决这个问题 第5个回答  2013-04-11 可采用百分比来设置大小

根据设备屏幕调整图像高度和宽度

【中文标题】根据设备屏幕调整图像高度和宽度

【英文标题】：Resizing image height and width according to device screen

【发布时间】：2014-01-03 06:48:14

【问题描述】：

如何在不同设备上全屏显示我的图像，即根据设备显示自动调整图像？

我尝试了“宽度：设备宽度”选项，但没有成功。有什么帮助吗？

【参考方案1】：

我找到了解决方案。我在我的 css 中遵循“@media 查询”概念，它为我解决了问题。

【参考方案2】：

检查这个 CSS 是否对你的代码有帮助！！

   html, body 
        width:100%; /* this is a must */
        height:100%; /* this is a must */
        margin:0;
        padding:0;
    
    img 
        width:100%; /* this will depend on parent containers width */
        height:auto;
    

see demo here（重新调整浏览器的宽度和高度以查看变化）