如何使用标题图像为移动设备设置HTML，这需要整个浏览器的宽度？

本文介绍了如何使用标题图像为移动设备设置HTML，这需要整个浏览器的宽度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我担心的是我必须为移动设备建立一个网站。现在的问题是：不同的智能手机有不同的显示分辨率。 有例如840x560,480x320或800x480。 为了让图像适合显示器的每一部现代智能手机，我需要写些什么元标签，CSS等等？ 谢谢，克里斯 因为 width：100％; 似乎得到了很好的支持，所以我建议： #header { width：100％; padding：0; 保证金：0; } #header img { width：100％; padding：0; border：0; outline：0; } < div id =header> < img src =header.png/> < / div> 或 #header img { width：100％; padding：0; border：0; outline：0; } < img src =header.png/> 设置 just 宽度表示图片的宽高比将由浏览器保存。但请记住，将图像操作（缩放/调整大小）传递到手机的浏览器可能会导致引入不太漂亮的手工制品。 如果您有可以选择使用不同尺寸的图片，您可以使用 @media queries ： < link rel =stylesheethref =mobileStylesheet1.cssmedia =only screen and （max-device width：840px）/> < link rel =stylesheethref =mobileStylesheet2.cssmedia =only screen and（max-device width：800px）/> 并且，在这些样式表中，定义： mobileStylesheet1.css #header { background：transparent url（path / to / 840pxImage.png）0 50％不重复; $ / code $ / pre $ b mobileStylesheet2.css #header { background：transparent url（path / to / 800pxImage.png）0 50％no-repeat; $ / code> mobileStylesheet3.css #header { background：transparent url（path / to / 480pxImage.png）0 50％no-repeat; } my concern is that I have to build a website for mobile devices. In the concept is an image set as header.The problem is now: Different smartphones have different display resolutions.There are e.g. 840x560, 480x320 or 800x480.What do I have to write as meta-tags, css, etc. to fit the image in "every" modern smartphone to the display?I hope my concern was clearly described.Thanks, Chris 解决方案 Because width: 100%; seems to be well supported I'd suggest either:#header { width: 100%; padding: 0; margin: 0;}#header img { width: 100%; padding: 0; border: 0; outline: 0;}<div id="header"> <img src="header.png" /></div>or#header img { width: 100%; padding: 0; border: 0; outline: 0;}<img src="header.png" />setting just the width means that the image's width/height ratio will be preserved by the browser. Bear in mind, though, that passing off image manipulation (the scaling/resizing) to the phone's browser might result in less-than pretty artefacts being introduced.If you have the option of using different sizes of images, you can call those using @media queries:<link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/><link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/><link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>And, in those stylesheets, defining:mobileStylesheet1.css#header {background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;}mobileStylesheet2.css#header {background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;}mobileStylesheet3.css#header {background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;} 这篇关于如何使用标题图像为移动设备设置HTML，这需要整个浏览器的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！