@media only屏幕不起作用
[英]@media only screen does not work
问题描述
I have to optimize the website for mobile devices. 
我必须针对移动设备优化网站。 Tried to do it through @media only screen, but it did not work for me. 试图通过@media only屏幕来做到这一点，但是它对我不起作用。 Maybe someone knows how to put it in the code properly ? 也许有人知道如何正确地将其放入代码中？
body { background-color: black; background-image: url(../images/background.jpg); background-size: 100vw 100vh; } header { box-sizing: border-box; top: 0; right: 0; left: 0; position: absolute; width: 100vw; height: 15vh; border-top: 0.5vmin ridge gray; border-right: 0.5vmin ridge gray; border-left: 0.5vmin ridge gray; } header img { max-height: 14vmin; display: block; margin-left: auto; margin-right: auto; vertical-align: center; } etc.
<!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link type="text/css" rel="stylesheet" href="css/homepage.css"> <meta http-equiv="Content-type" content="text/html;charset=utf-8" /> <title>Airinn hotel // Home</title> </head> <body> <header> <img src='images/logo.png' />etc.
2 个解决方案
解决方案1
0 2015-10-29 14:01:54
Did you try having several css ? 您尝试过几个CSS吗？ The first one, global(homepage.css) and one for each kind of support ? 第一个是global（homepage.css），一个是每种支持？
<link type="text/css" rel="stylesheet" href="css/homepage.css" />
<!-- Now for "normal" screens" -->
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" />
<!-- And for mobiles / small screens -->
<link type="text/css" rel="stylesheet" href="css/small.css" media="handheld" />
the @media doesn't need the "only", it will be read only by the matching media @media不需要“ only”，它只会被匹配的媒体读取
解决方案2
0 已采纳 2015-10-29 14:02:25
This is how it should be done (Mobile first): 这是应该如何做的（首先移动设备）：
.test {
width: 200px;
}
@media screen and (min-width: 1024px) {
.test {
width: 1000px;
}
}
Demo: http://jsfiddle.net/yzt9zjno/ 演示： http ： //jsfiddle.net/yzt9zjno/
Also, this tutorial should help . 此外， 本教程也应有所帮助 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.