我有以下html, js小提琴 Update :注意,我也在页面中使用了Jquery Mobile, 这很好,效果很好。 但这不是响应式的,这意味着它在移动设备和台式机上看起来同样不错。 我试图使宽度为100%。 看起来并不总是那么好。 ...
提示:本站收集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>
您需要为父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框架。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.