<分区>
我是 html、css 的新手
我尝试使用 html/css 创建简单的“即将推出”页面。
它在我的屏幕上看起来不错，但当我尝试通过移动设备查看该页面时却并非如此。
我已经在 PS 中使用文本和代码创建了背景图像，我添加到链接到 fb 和 in 的图像(facebook、Linkedin)。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<style>
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div {
height: 200px;
width: 400px;
position: fixed;
top: 85%;
left: 58%;
font-size: 48px;
margin-top: -100px;
margin-left: -200px;
}
div1 {
height: 200px;
width: 400px;
position: fixed;
top: 85%;
left: 65%;
font-size: 48px;
margin-top: -100px;
margin-left: -200px;
}
</style>
</head>
<body>
<div>
<a href="https://www.facebook.com/myPage" target="_blank">
<img src="f.png" width="60px" height="60px"
name="f_name" onmouseover="f_name.style.width='58px'; f_name.style.height='58px';"
onmouseout="f_name.style.width='60px'; f_name.style.height='60px';"/>
</a>
</div>
<div1>
<a href="https://www.linkedin.com/myPage" target="_blank"> <img src="in.png" width="60px" height="60px"
name="in_name" onmouseover="in_name.style.width='58px'; in_name.style.height='58px';"
onmouseout="in_name.style.width='60px'; in_name.style.height='60px';"/>
</a>
</div1>
</body>
</html>
最佳答案
您可以使用媒体查询进行响应，如下所示:
/* MEDIA QUERY FOR IPAD LANDSCAPTE */
@media (min-width: 980px) and (max-width: 1100px) {
}
/* MEDIA QUERY FOR IPAD PORTRAIT */
@media (min-width: 768px) and (max-width: 979px) {
}
/* MEDIA QUERY FOR ALL MOBILE DEVICES : HAVING LESS THAN 767 RESOLUTION */
@media (max-width: 767px) {
}
/* MEDIA QUERY FOR EXTRA SMALL : IPHONE LANDSCAPE & PORTRAIT DEVICES */
@media (max-width: 480px) {
}
在这里，如果您是响应式网站的新手，您可以找到很好的教程。
关于javascript - 如何为所有分辨率监视器和移动设备正确显示 html 页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25544471/
相关文章：
jquery - 使用 jQuery 在单独的 DIV 中包装任意内容(H2、H3、P 等)
javascript - 使用 Ember.js 创建时区下拉列表
javascript - Bootstrap/AngularJs : How to set bold attribute for the active selection of nav class?
html - 显示 inline-block 和 float left 问题
javascript - 如何在具有多个对象的高度受限的 div 中实现垂直滑动 Controller