css手机配置 |css3 选择器 父元素

/* 使页面不可缩放 */
meta {
viewport: width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;
}
/* 删除链接下划线 */
a {
text-decoration: none;
}
/* 提供更好的用户体验 */
* {
-webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
-webkit-text-size-adjust: none; /* 禁止字体大小自动调整 */
-webkit-tap-highlight-color: transparent; /* 隐藏链接和按钮的高亮背景 */
}
/* 调整浏览器外边距和内边距为0 */
html, body {
margin: 0;
padding: 0;
}
/* 全屏背景 */
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

如果大家想要更好地控制设备特别细节，大家可以采用CSS3媒体查询。它可以让大家根据屏幕宽度或其他媒体类型，调整相应的CSS样式。例如：

/* 手机竖屏 */
@media screen and (max-width: 480px) {
body {
background-color: #eee;
}
}
/* 手机横屏 */
@media screen and (min-width: 481px) and (max-width: 767px) {
body {
background-color: #ccc;
}
}

上述媒体查询代码会检测屏幕宽度，然后相应地调整body的背景颜色。它可以帮助大家实现更好的用户体验和更好的可读性。