响应式网页设计

响应式网页设计或称自适应网页设计或称回应式网页设计/对应式网页设计，是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面计算机显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放，平移和滚动等操作行为。
真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制
用一套代码解决几乎所有设备的网页展示的问题

   <!--
       width = device-width :  iphone或者ipad 上横竖屏的宽度 =  竖屏时候的宽度  不能自适应的问题
       initial-scale=1.0    :  windows phone ie浏览器 上横竖屏的宽度 =  竖屏时候的宽度 不能自适应的问题
      -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：可视区宽度
device-width: 设备宽度
initial-scale：初始缩放比例
minimum-scale：最小缩放比
maximum-scale：最大缩放比
user-scalable：是否允许用户缩放
css像素根据设备像素进行计算 1css像素 == 1 是设备像素设备的分辨率 dpi值来计算css像素真正展现的大小

响应式网页开发方法

流体网格：可伸缩的网格（大小宽高都是可伸缩（可用flex或者百分比来控制大小）float）—-》布局上面元素大小不固定可伸缩
2. 弹性图片：图片宽高不固定（可设置min-width: 100%）
3. 媒体查询：让网页在不同的终端上面展示效果相同（用户体验相同➡让用户用着更爽）在不同的设备（大小不同分辨率不同）上面均展示合适的页面
4. 主要断点：设备宽度的临界点
大小的区别 —-》宽度不同 —-》根据不同宽度展示不同的样式
响应式网页开发主要是在css样式上面进行操作
媒体查询
link引入
```
<link rel="stylesheet" media="screen and (max-width: 375px)" href="index.css">
```
screen 这是媒体类型后面加媒体特性需要用and连接
(max-width: 375px) 这是媒体特性，也叫主要断点媒体特性必须加括号。
@import引入
```
@import 'index.css' screen and (max-width: 375px);
```
css样式引入
```
@media screen and (max-width: 375px){
         html, body {
             width: 100%;
             height: 100%;
             background-color: red;
         }
     }
```

渐进增强
iphone6 向上兼容兼容最新设备
针对低版本浏览器进行构**建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级
开发通用版本再兼容老版本
向下兼容一开始就构建完整的功**能，然后再针对低版本浏览器进行兼容
先移动端 —-》 pc端
先iphone6为初始原型开发 —-》兼容其他的设备 ====》渐进增强
css3-lesson7-1.pptx

前端杂记

css响应式布局

响应式网页设计

响应式网页开发方法

媒体查询