个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
我正在制作一个非常简单的网站倒计时网站，只有一张图片和两行文字(包括倒计时)。我想让它对设备宽度负责。当有人在手机或平板电脑上看到这个网站时，我希望字体更小。我用过媒体查询。当我想在我的 PC 浏览器中测试它时(通过调整浏览器窗口的大小)它不起作用。谁能告诉我哪里出了问题？
HTML:
<head>
<meta name="viewport" content="width=width, initial-scale=1.0;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Countdown</title>
<link rel="stylesheet" type="text/css" media="all" href="css/main.css" />
<script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
// countdown script
</script>
</head>
<body>
<div id="content">
<div id="zasuvka"></div> //here is my image
<p id="ele">TITLE</p> // here is the title
<div id="odpocet" >
<div id="prichadza">Remains: </div> <div id="countdown"></div> //here is shown the countdown
</div>
<div id="show" style="display:none"> // div that will show after the countdown
<a href="#" target="_blank">LINK</a>
</div>
</div>
</body>
CSS:
@media screen and (max-width: 480px) {
#prichadza {
font-size:24px;
float:left;
text-align:center;
font-family:"sans";
color:#ffffff;
padding-top:10px;
}
#countdown{
padding-left:10px;
font-size:24px;
font-family:"sans";
color:#a54d14;
}
}
body{
background: -webkit-linear-gradient(#e4cf8e, #fdf7e5); /* For Safari */
background: -o-linear-gradient(#e4cf8e, #fdf7e5); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e4cf8e, #fdf7e5); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e4cf8e, #fdf7e5); /* Standard syntax (must be last) */
}
@font-face
{
font-family: sans;
src: url(../fonts/OpenSans-Bold.ttf);
}
#content{
width:100%;
text-align:center;
}
#zasuvka {
width:318px;
height:303px;
background:url('../img/zasuvka.png')no-repeat;
margin:auto;
margin-top:120px;
}
#countdown{
padding-left:10px;
font-size:44px;
float:left;
font-family:"sans";
color:#a54d14;
}
#ele {
font-family:"sans";
font-size: 48px;
color:#a54d14;
margin:0px;
padding-top:30px;
}
#prichadza {
font-size:34px;
float:left;
text-align:center;
font-family:"sans";
color:#a54d14;
padding-top:10px;
}
#odpocet {
width:600px;
padding-left:95px;
margin:auto;
}
#show a {
font-size:44px;
text-align:center;
font-family:"sans";
color:#a54d14;
}
有什么建议吗？谢谢。
最佳答案
将“@media screen and (max-width: 480px)”移到css文件末尾!所以它看起来像:
body{
background: -webkit-linear-gradient(#e4cf8e, #fdf7e5); /* For Safari */
background: -o-linear-gradient(#e4cf8e, #fdf7e5); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#e4cf8e, #fdf7e5); /* For Firefox 3.6 to 15 */
background: linear-gradient(#e4cf8e, #fdf7e5); /* Standard syntax (must be last) */
}
@font-face
{
font-family: sans;
src: url(../fonts/OpenSans-Bold.ttf);
}
#content{
width:100%;
text-align:center;
}
#zasuvka {
width:318px;
height:303px;
background:url('../img/zasuvka.png')no-repeat;
margin:auto;
margin-top:120px;
}
#countdown{
padding-left:10px;
font-size:44px;
float:left;
font-family:"sans";
color:#a54d14;
}
#ele {
font-family:"sans";
font-size: 48px;
color:#a54d14;
margin:0px;
padding-top:30px;
}
#prichadza {
font-size:34px;
float:left;
text-align:center;
font-family:"sans";
color:#a54d14;
padding-top:10px;
}
#odpocet {
width:600px;
padding-left:95px;
margin:auto;
}
#show a {
font-size:44px;
text-align:center;
font-family:"sans";
color:#a54d14;
}
@media screen and (max-width: 480px) {
#prichadza {
font-size:24px;
float:left;
text-align:center;
font-family:"sans";
color:#green;
padding-top:10px;
}
#countdown{
padding-left:10px;
font-size:24px;
font-family:"sans";
color:#a54d14;
}
}
关于html - 调整大小时在浏览器中测试时响应式设计不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21652168/
26
4
0
我编写了具有几个日志函数的日志帮助程序类。在 DEBUG 模式下一切正常。但是当我在 Release模式下运行我的代码时，它崩溃了。下面是代码片段: + (void)info:(NSString *)
在用 Python 编程时，如何使 VSCode 中的格式化程序使用制表符而不是空格进行缩进？我已经将 VSCode 设置为使用制表符，但是 Python 的格式化程序忽略了这一点并且只做它自己的事情
最初我的 mongod 进程运行良好。我发现我的虚拟机上有空间紧缩，所以删除了 2 个较旧的 oplog 文件以释放空间。然后接下来我启动 mongod 并开始出现错误。然后我尝试在本地数据库中修复我
CUDA 中的内核启动通常是异步的，这(据我了解)意味着一旦 CUDA 内核启动，控制权立即返回给 CPU。当 GPU 忙于数字运算时，CPU 继续做一些有用的工作除非使用 cudaThreadsyn
在 Angular View 之间链接时，是否有一种简单的方法可以保留查询参数？ 当我使用 ngHref 时，查询参数丢失: Other page 我从这个网址导航 http://localhost/
nntp(新闻)打开错误:“>> 新闻/nntp 名称或服务未知)”。 我正在运行 ubuntu 最佳答案 Gnus 要求您配置要使用的新闻服务器，并且我认为它默认为“新闻”，它在您的本地搜索域中不存
有没有一种方法可以使 vim 突出显示具有给定颜色的制表符，但仅限于 expandtab选项设置了吗？我知道 'listchars' ，但我希望能够区分“有效标签”和“无效标签”。 最佳答案 您可以添
我对 Pandoc 比较陌生，我正在尝试用我的出版物生成一个 HTML 文件以放在我的网站上。我希望首先按年份对出版物列表进行编号和组织，最新的排在最前面，最早的排在最后。 我可以使用正确的 csl
根据 this question和我读过的文档，Spark Streaming 的 foreachRDD(someFunction) 将让 someFunction 本身仅在驱动程序进程中执行，但如果
我使用 stat_summary 从我的数据创建了多个条形图。但是，我想手动指定误差线的限制(而不是使用 mean_cl_boot)。对于使用 facet_grid 绘制的数据，如何做到这一点？ 我用
我在 Ubuntu 下的 Bash 中运行 R。有没有办法在运行 R 时在 Bash 中使用颜色语法高亮显示？我将非常感谢有关该主题的任何信息，并希望这个问题不会令人讨厌。 最佳答案 您可以试试 co
在我的 Symfony2 应用程序中，我设置了防火墙，以便 /admin 下的所有内容路由需要通过 https 运行，但是在部署时我得到一个重定向循环。我已经阅读了 Symfony2 网站上关于防火墙
我在查询中给出了以下代码。 where to_date(cal_wid,'yyyymmdd') between add_months(to_date(sysdate, 'MM-YYY
我有一个动态 NSTableView，它可以根据提供的数据添加许多列。对于每一列，我将标题单元格设置为 NSPopUpButtonCell。 (旁注:我必须为 NSTableHeaderView 使用
我正在尝试创建一个嵌套列表。当点击时应将无序列表附加到 被点击了。 点击第一个后我的代码失败并且不会将列表附加到新插入的 。我想将无序列表添加到任何 就在列表中。 这是一个 fiddle :http
在 MyActivity 中，我正在尝试登录后端服务器。这是我尝试过的: myViewModel = new ViewModelProvider(this, factory).get(MyViewMo
有没有办法在打印 html 时在 javascript 中添加新行？这样打印出来的html是缩进的。 document.getElementById("id").innerHTML = "hello"
我正在使用 glDrawElements 绘制三角形网格，并且希望能够使用鼠标单击来拾取/选择三角形。三角形的网格可以很大。 在固定功能 OpenGL 中，可以使用 GL_SELECT: http:/
下面的可重现数据包含每个动物(猫和狗)在每个季节(夏季和冬季)的两个协变量(cov1 和 cov2)及其各自的误差估计值 (SE) 的 50 个观察值。 library(ggplot2); libra
我有多个按钮，每个按钮都有相关文本，当用户单击按钮时，文本应根据按钮更改，并且文本应显示在 DIV 中。 我使用 if elseif 在每个按钮的文本之间进行选择，现在我无法通过该函数将文本传递给 d
我是一名优秀的程序员,十分优秀！