我使用这个网站,Responsinator它为我的移动网站提供了不同的屏幕分辨率,并以以下输出屏幕分辨率/尺寸显示:
- iPhone 3+4 竖屏·宽度:320px
- iPhone 3+4 横向·宽度:480px
- iPhone 5 竖屏·宽度:320px
- iPhone 5 横屏·宽度:568px
- Android 纵向 · 宽度:240px
- Android 横向 · 宽度:320px
- Android (Nexus 4) 纵向 · 宽度:384px
- Android (Nexus 4) 横向·宽度:600px
- iPad 纵向 · 宽度:768px
- iPad 横向·宽度:1024px
- Kindle 竖屏·宽度:600px
- Kindle 横向 · 宽度:1024px
我唯一想加载 shorter.css
的时间是以下任何情况:
- iPhone 3+4 竖屏·宽度:320px
- iPhone 5 竖屏·宽度:320px
- Android 纵向 · 宽度:240px
- Android 横向 · 宽度:320px
这是 wider.css
的 CSS:
<!--
button:before {
content: " ";
display: inline-block;
background: url("../theImages/ste.png") no-repeat;
height: 38px;
line-height: 38px;
vertical-align: middle;
width: 52px;
margin-right: 20%;
}
button {
border: 1px solid rgba(0,0,0,0.3);
background: #eee;
color: #515151;
font-size: 24px;
font-weight: 700;
padding: 21px 34px;
text-decoration: none;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
padding:0;
border:0;
}
button:hover, a.button:hover {
background: #cbcbcb;
cursor: pointer;
}
button:active, a.button:active {
background: #ccc;
padding: 22px 34px 20px; /* Bump down text */
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
text-shadow: none;
}
.red {
background: #e1001a;
color: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,0,22)), color-stop(0.58, rgb(226,0,26)));
background: -moz-linear-gradient(center bottom, rgb(192,0,22) 21%, rgb(226,0,26) 58%);
text-shadow: 0 1px rgba(0,0,0,0.25);
}
.red:hover {
background: #cb0018;
text-shadow: 0 1px rgba(0,0,0,0);
}
.red:active {
background: #ae0014;
}
-->
shorter.css
:
<!--
button:before {
content: " ";
display: inline-block;
background: url("../theImages/ste.png") no-repeat;
height: 38px;
line-height: 38px;
vertical-align: middle;
width: 52px;
margin: 0 auto;
}
button {
border: 1px solid rgba(0,0,0,0.3);
background: #eee;
color: #515151;
font-size: 24px;
font-weight: 700;
padding: 21px 34px;
text-decoration: none;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
padding:0;
border:0;
}
button:hover, a.button:hover {
background: #cbcbcb;
cursor: pointer;
}
button:active, a.button:active {
background: #ccc;
padding: 22px 34px 20px; /* Bump down text */
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
text-shadow: none;
}
.red {
background: #e1001a;
color: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,0,22)), color-stop(0.58, rgb(226,0,26)));
background: -moz-linear-gradient(center bottom, rgb(192,0,22) 21%, rgb(226,0,26) 58%);
text-shadow: 0 1px rgba(0,0,0,0.25);
}
.red:hover {
background: #cb0018;
text-shadow: 0 1px rgba(0,0,0,0);
}
.red:active {
background: #ae0014;
}
-->
wider.css
看起来不错,因为文本和图像之间有一个空格,但对于 shorter.css
,文本和图像太挤在一起了。我该如何修改,以便测试和图像之间有一点空间。这是一个屏幕截图:
最佳答案
您可以试试 jQueryUI 插件。他们会为你节省很多时间 -
关于html - 在按钮内放置背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22229832/