相关疑难解决方法(0)
从JS/CSS检测系统DPI/PPI？
我正在研究一种独特的应用程序,它需要根据显示的设备生成特定分辨率的图像.因此,在常规Windows浏览器(96ppi),iPhone(163ppi),Android G1(180ppi)和其他设备上的输出是不同的.我想知道是否有办法自动检测到这一点.
我最初的研究似乎说不.我看到的唯一建议是在CSS中创建一个宽度指定为"1in"的元素,然后检查它的offsetWidth(另请参阅如何通过javascript访问屏幕显示的DPI设置？).有道理,但iPhone用这种技术骗我,说它是96ppi.
另一种方法可能是以英寸为单位获取显示尺寸,然后除以宽度(以像素为单位),但我不知道如何做到这一点.
推荐指数
解决办法
查看次数
更改字体高度和宽度
我有这个我正在努力的事情,当我想改变不是font-size两个属性,这将独立改变文本的宽度和高度.所以申请font-width: 50%时:
案文将延伸到一半:
这可能与CSS有关,还有高度属性吗？
推荐指数
解决办法
查看次数
导航菜单中的响应式垂直居中列表项
我正在开发一个响应式网站,并希望将其文本集中在一起.我可以用行高来做这个,但是它不会响应,当nav元素变小时,行高保持不变.所以,它基本上搞砸了我的设计.
有没有办法让行高响应,或任何其他(响应)方式将文本放在垂直中心？这似乎是一件简单的事情,但我无法弄明白.
这是一个小提琴:http://jsfiddle.net/4zahumwm/
HTML:
<h1 title="test">test</h1>
<nav id="nav-utility">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MY STORY</a></li>
<li class="mid-left"><a href="#">GALLERY</a></li>
<li class="mid-right"><a href="#">RATES</a></li>
<li><a href="#">TERMS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div id="container"></div>
CSS:
html, body{
width:100%; height:100%;
margin:0; padding:0;
}
html {
}
div#container{
width:100%;
height:95.7%;
background: url(background/monitor/IMG_5929.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
h1{
background-image:url(images/menu/polygon.png);
display: block;
height: 71px;
left: 50%;
margin:0; padding:0;
margin-left: -43px;
position: absolute;
text-indent: -9999px;
top: 0;
width: 87px;
z-index: …推荐指数
解决办法
查看次数
如何使文本自动缩小以适合div？
我知道我可以调整字体大小,但是我希望它在不同平台上查看时自动缩小以适应div,例如,不同平台读取字体大小.
看小提琴:http://jsfiddle.net/08pyzgx4/
<body>
<div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.za/images/emailfiles/banner.png); background-repeat:no-repeat; display:block; max-width: 600px; font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#000; text-align:center; padding-top:12px;"><b>Bla Bla Bla Bla Bla Bla </b>
<div style="height:16px; max-height:16px; padding-left:88px; padding-right:88px; margin-top:18px; font-size:0.6em; letter-spacing:-0.02em; position:relative;"><strong>Website: </strong>www.blabla.co.za | <strong>E-mail: </strong>info@blabla.co.za | <strong>Control Centre: </strong>08600-22-blabla</div>
</div>
</body>
推荐指数
解决办法
查看次数
如何使我的字体大小响应？
我正在努力让一些大的头衔响应.我尝试过一些东西,比如:这个链接.但它没有用.
CSS
body {
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigationchanges. */
}
#page-wrap {
width: 760px;
margin: 0 auto;
}
.title {
font-family: Brush Script MT,cursive;
font-size: 10vw;
font-style: normal;
font-variant: normal;
font-weight: 500;
}
#welcome {
@extend .title;
}
#to {
@extend .title;
text-align: center;
font-size: 50px;
}
#mp{
@extend .title;
text-align: right;
}
.full {
background-image: url('../img/beach-bg1920-1080.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: …推荐指数
解决办法
查看次数
使用px或%进行响应式设计
我想知道我是否使用px或%进行响应式设计.我已经使用了px,但它没有足够的响应能力,因为它的大小是固定的,有人可以告诉我什么更适合用于响应式设计？我是html和css的新手,我为我的论文创建了一个学生门户网站.
这里是我的项目的例子我用px来调整这里的一些元素.我认为还有其他方法可以做到这一点,而且很难做媒体查询,因为你会逐一进行.有人可以给我点子吗？
这是480px
这是我的查询的例子......
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.img-responsive{
width: 230px;
height: 55px;
padding-left: 20px;
padding-top: 5px;
}
.footer{
height: auto;
}
.connect{
padding-left: 70px;
}
.contact{
padding-left: 90px;
padding-right:50px;
padding-top: 70px;
}
.visit{
padding-top:40px;
padding-left: 110px;
}
p{
padding-left: 40px;
}
.twitter-hover {
background-image: url('images/twitter-hover.png');
margin-left: 70px;
}
.social-slide{
margin-bottom: 50px;
}
hr.carved {
margin-top: 4em;
}
.copyr{
padding-left: 20px;
padding-right: 10px;
}
}
推荐指数
解决办法
查看次数