Javascript 如何为所有分辨率监视器和移动设备正确显示html页面？_Javascript_Html_Css_Screen Resolution

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

javascript html css

Javascript 如何为所有分辨率监视器和移动设备正确显示html页面？,javascript,html,css,screen-resolution,Javascript,Html,Css,Screen Resolution,我对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-

我对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>


麦斯特
html{
背景：url（bg.jpg）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
div{
高度：200px；
宽度：400px；
位置：固定；
最高：85%；
左：58%；
字体大小：48px；
利润上限：-100px；
左边距：-200px；
}
第一组{
高度：200px；
宽度：400px；
位置：固定；
最高：85%；
左：65%；
字体大小：48px；
利润上限：-100px；
左边距：-200px；
}

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

/* 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) {
}

在这里，你们可以找到很好的教程，若你们是一个响应网站的初学者

如果您想让您的父系响应，请确保您在标题中提到了视口i

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

如果您提到上述内容并使用媒体查询，您的网站将变得响应迅速。

有一些框架可以为您提供很多帮助，如果您开始使用，我建议您熟悉其中一个框架。其中最受欢迎的是

开始 bootstrap中响应式布局的关键概念之一是。我不会详细介绍网格系统的所有可能选项，但总体要点如下

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

超小型
```
xs
```
（<768px宽）
小型
```
sm
```
（>=768px宽）
中等
```
md
```
（>=992px宽）
大的
```
lg
```
（>=1200px宽）

正如您可能已经注意到的，较小的屏幕尺寸是优先考虑的。换句话说，如果我定义了

xs

规则，它将成为默认规则，要在

md

屏幕上执行不同的操作，我需要显式地这样做

网格默认情况下有12列。我可以向html元素中添加类，这些类告诉引导程序在屏幕宽度改变时希望它们的行为

<!-- 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

屏幕宽度上容器宽度的一半

JSFIDLE示例

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

进一步阅读

尝试媒体查询。。对于不同的分辨率引导css容器/行/列组件，我不知道如何实现它们，我对web编程一无所知。你能给我一些代码或链接在哪里可以找到它们吗？除非你想使用自定义元素，否则不要使用

。如果需要唯一标识元素，请在css中使用id属性：

并使用css id选择器

#div1

，阅读本文：@AwalGarg-谢谢！！你能给出你评论的具体原因吗。