Html 只为移动设备更改 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42586044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change CSS only for mobile devices?
提问by Jan
I just finished creating my website but now I have found a failure. My problem is that my website looks totally nice on the PC. But if I go and look at it from my mobile phone, the spaces between certain images etc. are a great deal too much...
我刚刚完成了我的网站的创建，但现在我发现失败了。我的问题是我的网站在 PC 上看起来非常好。但是如果我用手机看它，某些图像之间的空隙等等太多了......
So my question is, how can I create some CSS codes who are only affecting the mobile devices and maybe tablets?
所以我的问题是，如何创建一些只影响移动设备和平板电脑的 CSS 代码？
Is there a way?
有办法吗？
回答by Eyal Cohen
CSS has feature called media queries. From the MDN link:
CSS 具有称为媒体查询的功能。来自 MDN 链接：
Media queries, added in?CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself
媒体查询，添加在？CSS3 中，让内容的呈现针对特定范围的输出设备进行定制，而无需更改内容本身
For example:
例如：
div {
background: black;
}
@media (max-width: 1000px) {
div {
background: yellow;
}
}
The background color of this div will be yellow on screen under 1000px width like in the example provided.
这个 div 的背景颜色在 1000px 宽度以下的屏幕上将是黄色，如提供的示例所示。
回答by Purvil Bambharolia
You can use media-queries for different screen resolutions. Example -
您可以对不同的屏幕分辨率使用媒体查询。例子 -
#image img {
width:375px;
}
@media screen and (min-width: 1366px) {
#image img {width:375px;}
}
回答by Joseph Vu
Read and understand about Media Queries
阅读并了解媒体查询
You will be able to adjust the css of certain media sizes of your website.
您将能够调整网站某些媒体尺寸的 css。
