繁体   English   中英

如何使html代码响应

how to make html code responsive

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

嗨,我想使html代码响应。 这是我的代码,但没有响应,我该怎么做。 我听到了一些有关媒体查询的信息。 如何将其用于我的代码。 在我的代码中,仅存在内联CSS。 我怎么可能使我的代码响应。

 <div class="row_inner_wrapper clearfix" style="background-color: #777777;background-position: left top;background-repeat: no-repeat; margin-top: 3%;"> <div style = "width: 60%; height:50%; font-weight: bold; font-size: 20px; float: left; background-color: #777777;"> <div style = "width: 28%; float: left;"> <img src= "C://wamp//www//rushi.jpg"; alt="" style ="max-width: 100%; height: auto; width: 100%; margin-left:10%"></div> <div style = "width: 72%; float: left";> <div style="font-weight: bold; font-family: Patua One,Arial,Tahoma,sans-serif; text-align: center;"><strong>abc </strong></div> <div style = "text-align: center;"> </div> <div style = "width: 30%; float: left; margin-left: 5%"> <span style="font-weight: bold;"><strong>abc</strong></span><br/> <span> Bathroom </span></div> <div style = "width: 30%; float: left;"> <span style="font-weight: bold;"><strong>abc </strong></span><br/> <span>abc</span></div> <div style = "width: 30%; float: left;"> <span style="font-wight: bold;"><strong>abc</strong></span><br/> <span>abc </span></div> </div> </div> <div style = "width: 40%; float:left; font-weight: bold; font-size: 20px; "> <div style = "width: 100%; float: left;"> <span></span><br/> <span style="font-family: bold;"><strong>abc</strong></span> </div> </div> </div> 

4 个回复

您需要为父div添加宽度以调整子元素的大小。 在示例中,row_inner_wrapper的宽度应定义为80%或您想要的任何宽度。

链接

这是针对此代码的,如果您希望完整的网页响应所有设备的兼容性,则需要添加

<meta name="viewport" content="width=device-width, initial-scale=1">

标记在文档的头部,还需要@media查询

这是响应的非常基本的结构。 如果要添加使用内部CSS,请在<head>使用它。

 .main-wrapper { min-height: 100px; background: black; } @media (max-width: 1023) { .main-wrapper { background: yellow; } } @media (max-width: 767) { .main-wrapper { background: green; } } @media (max-width: 479) { .main-wrapper { background: red; } } 
 <div class="main-wrapper"></div> 

正如swapnil solanke所说,不要忘记在<head>添加<meta name="viewport" content="width=device-width, initial-scale=1"> <head>

就像@ w3debugger确实触及到的一样,您可以使用@media queries<meta name="viewport" content="width=device-width, initial-scale=1"> 我使用它的方式是从Mobile设计开始,如果屏幕使用min-width扩展到特定宽度,则会创建响应式更改。

/* Initial mobilephone state*/
.row_inner_wrapper div{
  padding:1em}

/* TABLETS */
@media only screen and (min-width: 40.063em) {
 .row_inner_wrapper div{
    padding:0}
}

/* LARGE SCREENS*/
@media only screen and (min-width: 64.063em) {
 .row_inner_wrapper div{
    /*something else*/}
}

首先,为什么您要使用内联CSS? 这是一种非常讨厌的编码方式。...例如,您可以使用@media查询或使用bootstrap框架。

1 如何使此HTML代码段具有响应性?

我有以下html, js小提琴 Update :注意,我也在页面中使用了Jquery Mobile, 这很好,效果很好。 但这不是响应式的,这意味着它在移动设备和台式机上看起来同样不错。 我试图使宽度为100%。 看起来并不总是那么好。 ...

3 如何使html图像响应?

我有一个html图像。 它是我的徽标,然后在右上角是社交媒体的链接。 我已经准备好了图像,但是当我调整屏幕大小时,它没有像其他所有东西一样反应灵敏。 这就是我所拥有的; 请问我哪里出问题了? ...

4 无法使HTML响应

我使用引导程序作为UI框架,实际上一切正常,但是我需要使我的网站对移动设备响应。 我现在有一个简单的结构: 我试图至少使页眉和页脚响应如下: 这不起作用,分辨率甚至相同,我该怎么办? ...

5 如何使这个 html 响应

我是网站开发的新手。 我试图响应此代码..但它不起作用。 我只是想让这个页面响应。 我正在尝试让这个网页在手机、平板电脑、笔记本电脑上做出响应,这是我的 html 代码 body{background-color:black} .main{ margin:0 auto; padding ...

6 如何使我的代码对Mozilla Firefox响应

这是我的博客,我实现了带有值的选择标签。 我的问题是标签在chrome浏览器中正确显示。 但是,当我在Mozilla浏览器中打开博客时,它将标签从左向右拉伸,如下图所示,您可以查看它。 如何使它对Mozilla Firefox和所有浏览器都具有响应能力。 下面是我的代码。 ...

7 使我的 HTML 代码以最少的重写代码量响应移动设备的最佳方法是什么?

抱歉,如果这是一个相当模糊的问题,我有一个网格,两行相互重叠,当单击面板时,内容会在两行中的任一行下方展开。 这适用于台式机和平板电脑大小的设备,但对于移动设备,我希望面板垂直跨越,扩展内容直接在每个面板下方打开。 任何有关此起点的指针都会很棒,我知道我可以使用媒体查询,但真的不确定如何构建我的代 ...

8 如何使HTML代码不执行?

我想做的是允许用户输入一个字符串,然后在div元素内的网页中显示该字符串,但是我不希望用户能够添加粗体标签或任何实际上可以构成HTML的内容文字加粗。 如果文本中带有HTML标记,如何使用户输入的文本不会转换为HTML代码? ...

10 如何使此代码具有响应性?

.intro-section { height: 100%; padding-top: 150px; text-align: center; background: #449bb5; background-attachment: fixed !important; } .ham-lay ...

2016-02-24 13:10:43 1 110   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM