为什么我的响应式 CSS 没有占用媒体宽度? [英] Why my responsive CSS is not taking media width?
问题描述
正如标题所说，我无法为我的 PHP 网页设置特定于媒体屏幕宽度的 CSS.
As the title's saying, I can't set media screen width-specific CSS for my PHP webpage.
这是我的 index.php 的 部分:
Here is my <head> section of my index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo SITENAME; ?> - <?php echo SITEDESC; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <!-- for responsive coding, the "Viewport" meta tag -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src='scripts/respond.min.js'></script> <!-- for responsive mobile themes -->
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
对于我的 HTML 元素 style.css 中)，我指定:
For my HTML element <header> ... </header>, in my CSS (in style.css), I specified:
header{
background: #1e5799;
min-height: 40px;
max-height: 136px;
}
但是使用Web Developer"工具栏的调整大小 » 查看响应式布局在不同宽度的设备布局中显示出一些下降.
But using "Web Developer" toolbar's Resize » View Responsive Layouts is showing some fall in different width device layouts.
例如:
在我的 <header> 标记中，内部元素正在消失，因此我需要增加标题的高度.所以我在 style.css 中指定:
For example:
In my <header> tag, the inner elements are getting out, so I need to increase the height of the header. So I specified in style.css:
/* Media Queries for Different Types of Mobile Devices */
/* Mobile portrait (320 x 480) */
@media all and (max-device-width: 320px) {
header{
height: 136px !important;
background-color: #FF0000;
}
}
但它不起作用.:(
我对响应式 CSS 缺少什么?
What am I missing about responsive CSS?
在前 2 个回答之后，根据他们的建议，我尝试使用:
After the first 2 answers, with their suggestions, I tried using:
@media screen and (max-width: 320px) {
header{
height: 136px !important;
background-color: #FF0000;
}
}
是的，我把我的媒体 CSS 放在了 style.css 的底部.
And yes, I put my media CSS at the bottom of style.css.
我也尝试将 mobile.css 分离为:
I also tried separating the mobile.css as:
<link type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/mobile.css" />
我尝试放置以下代码的地方:
Where I tried placing the following code:
header{
height: 130px;
}
还是不行.
推荐答案
在开发过程中，max-device-width 不会帮助您可视化窗口调整大小的更改，因为此特定媒体查询针对的是实际设备大小(在您的计算机，将是您的显示器，而不是浏览器窗口).
While developing, max-device-width will not help you visualizing the changes on window resize, because this particular media query targets the actual device size (which, on your computer, would be your monitor, not the browser window).
另一方面，max-width 以浏览器窗口宽度为目标，因此可以完美地调整大小.
On the other hand, max-width targets the browser window width, so works perfectly on resize.
除非您想专门针对较小的设备(并且不响应窗口大小调整)，否则我建议改用 max-width.
Unless you want to target specifically smaller devices (and not be responsive on window resize), I would suggest to go for max-width instead.
这篇关于为什么我的响应式 CSS 没有占用媒体宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
