自适应/响应式网页css代码写法教程
响应式css主要使用@media标签
@media screen and (max-width: 767px) { /* 手机 */
#main_login {
margin-top: 15% !important;
}
}
@media screen and (min-width: 992px) { /* 平板 */
#main_login {
margin-top: 3% !important;
background:url(resources/images/login_icon2.jpg) no-repeat;
}
}
@media screen and (min-width: 1200px) {/* 分辨率比较低或者屏幕比较小的台式电脑,笔记本 */
#main_login {
margin-top: 3% !important;
background:url(resources/images/login_icon2.jpg) no-repeat;
}
}
@media screen and (min-width: 1500px) {/* 大屏笔记本,台式机*/
#main_login {
width:60% !important;
margin-top: 5% !important;
background:url(resources/images/login_icon2.jpg) no-repeat;
margin-left: 20% !important;
}
}
|
|
