移动端网页开发)------响应式网页

移动端网页开发

移动端网页开发的两种方案：

1. 响应式网页
2. 开发一个新的网站。使用移动端的布局方式。

响应式网页

概念

同一个网页会根据视口的不同，显示不同的样式。

优缺点

优点

1. 面对不同分辨率的设备比较灵活。
2. 比较快捷的解决多设备的显示适应问题。

缺点

1. 如果兼容的设备比较多，则工作量比较大，效率比较低。
2. 代码会比较臃肿，加载时间会比较长。

适用场景

1. 如果是一个小型的网站，我们一般使用响应式网页，因为响应式的开发量比较小，开发速度比较快。
2. 如果是一个大型的网站，比如说，小米，腾讯新闻等等，适合第二种方法，开发一套适用于移动端的网站。

如何开发响应式网页

媒体查询

css2就已经部分支持了，css3又新增了一些属性。IE8以下的浏览器不支持。

1.设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.媒体查询基本语法

@media 媒体类型 and (媒体特性){
	样式
}

3.媒体类型

媒体类型可以理解为各种设备。

• all 所有的媒体类型
• screen 屏幕设备：电脑，智能手机，平板电脑。
• print 打印设备（极少）
• speech 屏幕阅读器（极少，给盲人用的设备）

4.实现方式

1. 外链式 通过link标签的media属性来设置。
2. 内嵌式 直接写在style标签中。

媒体特性

max-width min-width（重点）

max-width:x 小于等于x时生效

    /* 媒体设备必须是屏幕设备， 小于等于1200px的时候生效。 */
    @media screen and (max-width:1200px){
      h2{
          color: green;
      }
    }

min-width:x 大于等于x时生效

   /* 媒体设备必须是屏幕设备， 大于等于1300px的时候生效。 */
    @media screen and
        (min-width:1300px) {
      h2{
        font-size: 48px;
      }
    }

设备方向

属性：orientation

1. portrait 竖屏 高大于宽
2. landscape 横屏 宽大于高

逻辑判断

and：满足多个条件生效。

，：多个条件中满足一个时生效。

not ：不满足条件时生效。

【注意】

如果存在多个max-width判断，则数值大的放在前面，

如果存在多个min-widht判断，则数值小的放在前面。