Vin*_*nod 20 html css jquery-ui css3 jquery-mobile
我设计了一个页面,其中有四个div标签.如果我在手机上测试页面(5英寸),它完全适合页面,如果我在平板电脑上测试同一页面,页面适合30%的屏幕.那么如何设置div尺寸以使其适合所有类型的屏幕.
HTML:
<div class="bubble0" align="center">
<h3>Three Levels </h3>
</div>
<div class="bubble" align="center"> </div><br/><br/>
<div class="bubble1" align="center"> </div><br/><br/>
<div class="bubble2" align="center"> </div><br/><br/>
<button>Play</button>
请给我任何建议,
Mik*_*ils 56
这称为响应式Web开发(RWD).为了使页面响应所有设备,我们需要使用一些基本的基础,如: -
1.在head中设置视口元标记:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
2.使用媒体查询.
例:-
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
3.或者我们可以直接使用RWD框架: -
一些好的文章
4.更大的设备,中型设备和小型设备媒体查询.(在我的场景中工作.)
以下媒体查询通用设备类型: - 更大的设备,中型设备和小型设备.这只是基本的媒体类型,适用于所有场景和易于处理的代码而不是使用各种媒体查询只需要关心三种媒体类型.
/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}
/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}
/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}
Emi*_*mil 15
你的问题有点不清楚你想要什么,但从你的评论判断,我认为你希望每个气泡覆盖屏幕,纵向和横向.在这种情况下,垂直部分是棘手的部分.
正如许多其他人已经回答的那样,您首先需要确保设置视口元标记以触发移动设备使用其"理想"视口而不是模拟的"桌面宽度"视口.这个标签最简单,最简单的版本如下:
<meta name="viewport" content="width=device-width, initial-scale=1">
资料来源:PPK,可能是这些东西如何运作的主要专家.(见http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf).
从本质上讲,上述内容可确保媒体查询和CSS测量对应于任何给定设备上虚拟"点"的理想显示 - 而不是缩小页面以使用非优化的桌面布局.您不需要了解它的细节,但这很重要.
现在我们有一个正确的(非伪造的)移动视口可以使用,调整到视口的高度仍然是一个棘手的主题.通常,网页可以垂直扩展,但不能水平扩展.因此,当您设置height: 100%某些内容时,该度量必须与其他内容相关.在最顶层,这是HTML元素的大小.但是当HTML元素高于屏幕(并扩展为包含内容)时,您的测量百分比将被搞砸.
输入vh单位:它的作用类似于百分比,但与视口有关,而不是包含块.MDN信息页面:https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
使用该单元就像你期望的那样工作:
.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */
它适用于很多浏览器(IE9及以上版本,现代版Firefox,Safari,Chrome,Opera等),但不是全部(支持信息:http://caniuse.com/#search=vh).它运行的浏览器的缺点是iOS6-7中存在一个巨大的错误,使得这种技术无法用于这种情况(详情请参阅:https://github.com/scottjehl/Device-Bugs/issues/36).它将在iOS8中修复.
根据项目的HTML结构,只要满足以下条件,您就可以使用height: 100%应该与屏幕一样高的每个元素:
<body>.html和body元素都设置了100%的高度.我过去曾使用过这种技术,但很久以前,我不确定它是否适用于大多数移动设备.试试看吧.
下一个选择是使用JavaScript帮助程序来调整元素大小以适合视口.要么是polyfill解决vh问题,要么完全解决问题.遗憾的是,并非每个布局都可以在CSS中使用.
Kar*_* AG 10
您可以使用视口高度,只需将div的高度设置为height:100vh;,这会将div的高度设置为设备视口的高度,此外,如果您希望它与设备屏幕完全一样,请设置保证金和填充为0.
另外,设置视口元标记是个好主意:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
请注意,这是相对较新的,IE8不支持,请在考虑此方法之前查看支持列表(http://caniuse.com/#search=viewport).
希望这可以帮助.
我没有太多时间,你的jsfidle现在不能正常工作.
但也许这会帮助你入门.
首先,你应该避免将CSS放在你的html标签中.喜欢align="center".
把这样的东西放在你的CSS中,因为它更清晰,不会那么快弃用.
如果你想设计响应式布局,你应该使用css3中引入的媒体查询,并且现在支持得非常好.
示例css:
@media screen and (min-width: 100px) and (max-width: 199px)
{
.button
{
width: 25px;
}
}
@media screen and (min-width: 200px) and (max-width: 299px)
{
.button
{
width: 50px;
}
}
您可以在媒体查询中使用任何所需的CSS.
http://www.w3.org/TR/css3-mediaqueries/