Question

我是html，css的新手

我尝试使用html / css创建简单的“即将推出”页面。

它在我的屏幕上看起来很不错但是当我试图通过手机查看该页面时却没有。

我在PS中创建了带有文本的背景图像，并从代码中添加了与fb和in链接的图像（facebook，Linkedin）。

以下是代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<style>

html { 
  background: url(bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
div {
    height: 200px;
    width: 400px;

    position: fixed;
    top: 85%;
    left: 58%;
    font-size: 48px;
    margin-top: -100px;
    margin-left: -200px;
}
div1 {
    height: 200px;
    width: 400px;

    position: fixed;
    top: 85%;
    left: 65%;
    font-size: 48px;
    margin-top: -100px;
    margin-left: -200px;
}
</style>
</head>

<body>

    <div>

        <a href="https://www.facebook.com/myPage" target="_blank"> 
        <img src="f.png" width="60px" height="60px"
          name="f_name" onmouseover="f_name.style.width='58px';     f_name.style.height='58px';"
        onmouseout="f_name.style.width='60px'; f_name.style.height='60px';"/> 
       </a> 

    </div>

    <div1>

        <a href="https://www.linkedin.com/myPage" target="_blank"> <img src="in.png" width="60px" height="60px"
        name="in_name" onmouseover="in_name.style.width='58px'; in_name.style.height='58px';"
        onmouseout="in_name.style.width='60px'; in_name.style.height='60px';"/> 
        </a>

    </div1>
</body>
</html>

Answer 1

您可以使用媒体查询进行响应，如下所示：

/* MEDIA QUERY FOR IPAD LANDSCAPTE */
@media (min-width: 980px) and (max-width: 1100px) {
}

/* MEDIA QUERY FOR IPAD PORTRAIT */
@media (min-width: 768px) and (max-width: 979px) {
}

/* MEDIA QUERY FOR ALL MOBILE DEVICES : HAVING LESS THAN 767 RESOLUTION */
@media (max-width: 767px) {    
}

/* MEDIA QUERY FOR EXTRA SMALL : IPHONE LANDSCAPE & PORTRAIT DEVICES */
@media (max-width: 480px) {
}

在这里，如果您是响应式网站的初学者，可以找到很好的教程。

Reference 1:

Reference 2:

Answer 2

有一些框架会为你做很多事情，如果你开始我建议你熟悉一个。其中最受欢迎的是Bootstrap。

入门

响应式布局的引导程序中的一个关键概念是grid system的概念。我不会详细介绍您使用网格系统的所有可能选项，但一般的要点就是这个。

有四种主要的“屏幕尺寸”：

超小xs（<768px宽）
小sm（＆gt; = 768px宽）
中md（＆gt; = 992px宽）
大lg（＆gt; = 1200px宽）

您可能已经注意到较小的屏幕尺寸优先。换句话说，如果我定义xs规则它将成为默认设置并在md屏幕上执行不同的操作，我需要明确这样做。

网格

默认情况下有12列。我可以在我的html元素中添加类，告诉bootstrap我希望它们在屏幕宽度变化时的行为。

<!-- The full container width (i.e. 12/12) on extra-small screens and above
     and half the container width (i.e. 6/12) from medium width and above -->
<div class="col-xs-12 col-md-6"></div>

此示例显示如何为特定屏幕大小阈值指定div（或任何类似段落的元素）的行为。示例中的div将是xs和sm屏幕宽度的容器的整个宽度，但是md和lg屏幕宽度上容器宽度的一半。< / p>

jsFiddle示例

http://jsfiddle.net/rlgod/oyzayqn6/1/

玩这个JSFiddle来更好地了解它是如何工作的。特别是拉伸“结果”部分，看看在某些阈值下内容会发生什么。

进一步阅读

Answer 3

如果您要让您的父亲做出回应，请确保您在标题中提到了Viewport。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

如果您提及上述内容并使用媒体查询，则Ur网站将会响应。

如何正确显示所有分辨率显示器和移动设备的html页面？

3 个答案:

入门

网格

jsFiddle示例

进一步阅读