响应式网页css代码写法

来源：互联网发布：visio 数据库图标编辑：程序博客网时间：2024/06/01 08:31

响应式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;              }            }

需要注意的几点：
1.viewport 的 initial-scale=1.0要加上，不然手机上获取的是实际分辨率而不是浏览器分辨率,如<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

2.IE678不支持@media 规则，若要兼容，需要把响应式相关样式写到外部样式表中，并引入respond.js

0 0