css自适应网页

CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。

要实现响应式布局，常用的方式有以下几种：

• 使用 CSS 中的媒体查询（最简单）；
• 使用 JavaScript
• 使用第三方开源框架。

自适应网页

自适应网页效果

设置 meta 标签

/*超大屏幕大于等于1200px*/
@media  screen and (max-width:575px){
    .inner{
        width: 100%;
    }
    .inner_hd{
        padding: 30px 0;
    }
    .item li {
        width: 50%;
    }
    .inner_hd h2{
        font-size: 26px;
    }
}
/*大屏幕大于等于992px*/
@media screen and (min-width:576px){
    .inner{
        width: 540px;
    }
    .item li{
        width: 50%;
    }
    .inner_hd h2{
        font-size: 30px;
    }
}
/*中等屏幕大于等于768*/
@media screen and (min-width:768px){
    .inner{
        width: 720px;
    }
    .item li{
        width: 33.3%;
    }
}
/*小屏幕大于等于576*/
@media screen and (min-width:992px){
    .inner{
        width: 960px;
    }
    .item li{
        width: 25%;
    }
}
/*超小屏幕小于576*/
@media screen and (min-width:1200px){
    .inner{
        width: 1200px;
    }
    .item li{
        width: 20%;
    }
}

• viewport：即视口，表示网页的可视区域；
• width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；
• initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；
• maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；
• minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；
• user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

** 如果需要全部代码，私聊领取。。。。。。。。。**