个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
这是整个网站的问题，而不仅仅是一个 div 或部分。为了使我的网站响应迅速，我使用了媒体查询。为了帮助我进行响应式样式设置，我使用了 Grids.css。我设置了一个媒体查询如下:
@media only screen and (max-width: 850px) {
.section-web-projects {
height: 290vh;
}
.skills div.col {
width: 100%;
}
.skills-div {
width: 100%;
height: auto;
padding-bottom: -20px;
text-align:center;
margin-right: 50px;
margin-left: - 50px;
font-size: 100%;
}
}
这对应于 html 中的以下内容:
<div class="row">
<h2 class="section-header"></h2>
</div>
<div class="row">
<h2 class="hireme-web"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </h2>
<div class="skills">
<div class="col span-1-of-4">
<div class="skills-div">
<h3> <i class="ion-iphone skills-div-icon"></i> <i class="ion-ios-monitor-outline skills-div-icon"></i> <i class="ion-ipad skills-div-icon"></i> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam volutpat, eleifend ex vel, rutrum nisl. Morbi gravida, libero a imperdiet vehicula, ante erat pretium metus, in scelerisque velit elit tincidunt eros <br> <br> </h3>
</div>
</div>
<div class="col span-1-of-4">
<div class="skills-div">
<h3> <i class="ion-ios-locked-outline skills-div-icon"></i> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et diam volutpat, eleifend ex vel, rutrum nisl. Morbi gravida, libero a imperdiet vehicula, ante erat pretium metus, in scelerisque velit elit tincidunt eros <br> <br> </h3>
</div>
</div>
</div> <!-- end of skills -->
</div> <!-- end of row -->
</section>
这是没有任何媒体查询的相应样式:
* {
box-sizing:border-box;
}
.row {
max-width: 80%;
margin: 0 auto;
}
.skills {
width: 100%;
float: left;
background-color: antiquewhite;
}
.skills-div {
padding: 10px;
background-color: #1abc9c;
opacity: 0.8;
text-align:left;
margin-bottom: 30px;
border-radius: 50px;
width: 200px;
height: auto;
margin-top: 10px;
margin-left: 10px;
margin-right: 5px;
font-size: 90%;
}
这是它在 Google Nexus 4 上的样子 384 px :
这是它在 400px 处的 chrome 窗口中的样子.这是我想要并已编码到媒体查询中的效果；但它不工作。
最佳答案
您还没有发布完整的源代码。但我敢打赌你已经忘记了 viewport 元标记
只需将其放入您的 html 中即可 <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
有关更多信息，请查看此站点: http://www.w3schools.com/css/css_rwd_viewport.asp
关于html - 网站在我的笔记本电脑上有响应，但在手机或平板电脑上没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34753966/
24
4
0
问题:将具有两个字符分隔符的数据文件加载到 Azure SQL Db 时，我们遇到以下错误。我们可能做错了什么以及如何解决这个问题？ 在 Azure Databricks 中使用 Python 笔记本
我正在使用 ipython notebook 迈出第一步，我成功地将它安装在我的远程服务器上(通过 SSH)，并使用以下命令启动它: ipython notebook --ip='*' ---pyla
我想知道对于一个网站来说，最好的数据库设计是什么，让用户(假设有 10k 个用户)给自己留下带有日期的注释。用户只能看到自己的笔记。 用户将看到的示例: 2014年9月28日 -去商店 -带狗去散步
我希望没有人会认为这个问题离题。我即将开始探索在 Jupyter 笔记本中使用 C# 内核。我看到有几种选择，有些似乎过时了。我对探索它们并不真正感兴趣，我只是想要一些能够很好地用于演示的东西。目的是
我已经使用此命令在 R 控制台中安装了 Rcpp，该命令直到现在通常用于安装要在 jupyter 笔记本上运行的软件包: install.packages('Rcpp', '/home/user/an
我已经使用更新了 Tornado sudo pip install --upgrade tornado 检查当前版本显示我已经有一个 4.0 以后的版本 找到命令的输出: pip 显示 Tornado
这个问题在这里已经有了答案: How can I share Jupyter notebooks with non-programmers? [closed] (6 个回答) 5年前关闭。 我安装了一
我有一个 IPython 笔记本，我不小心丢弃了一个巨大的输出 (15 MB)，导致笔记本崩溃。现在，当我打开笔记本并尝试删除有问题的单元格时，笔记本又崩溃了——从而阻止了我解决问题并将笔记本恢复到稳
当我使用 ipython 笔记本(Windows 版本)运行任何 %R 代码时，输出在结果之前包含一个 480 x 480 的空白图像。我已经申请了fix #2433让 rmagic 在 Wind
大家好，我想使用新的.NET Jupyter笔记本，因此我准备了一个gitt的存储库，其中包含dockerfile(是正确的)和NuGet.config文件，例如: here the tuto 一切都
如何将本地镜像添加到 IJulia 笔记本？该图像与 IPYNB 文件位于同一本地网络文件夹中。该文件夹可通过符号链接(symbolic link)访问。我尝试过相对文件名和绝对文件名。 
我是一名优秀的程序员,十分优秀！