# responseWeb

**Repository Path**: eriksyuan/responseWeb

## Basic Information

- **Project Name**: responseWeb
- **Description**: 响应式开发demo
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 响应式web开发


### 响应式网站技术成分

1. 流动网格

2. 弹性图片

3. #### 媒体查询

   width：视口宽度

   height：视口高度

   device-width:渲染表面宽度（设备屏幕宽度）

   device-height：渲染表面高度（设备屏幕高度）

   orirntation：检查设备处于横向模式还是纵向

   aspect-radio:视口宽高比  如：16/9

   device-aspect-radio：屏幕宽高比

   color：颜色位数bits

   resolution：检测屏幕或者打印机的分辨率（dpi）·

#### 优点

减少工作量（便于维护开发，提高开发效率）

seo优化

多套设备都能应用正确的布局

#### 缺点

加载过多样式与脚本

设计难定位

老版本浏览器兼容差


### rem

rem是相对html元素的font-size属性值的相对单位
如
```css
html{
  font-size:62.5%
}

body{
  font-size:1.6rem
}
```
浏览器默认字体大小为16px,62.5%即为10px;
此时的body内设置1.6rem即为16px

rem 和 em的区别

em是相对于父元素
使用em给css编写带来很多相对应的麻烦

### viewport

```html
<meta name="viewport" content="width=device-width"/>
```

`content="width=device-width"`

若不指定该属性 布局视口宽度为设备默认值

指定：布局视口成为理想视口（视口宽度为设备宽度）
`initial-scale=1.0` :设置默认的缩放比例

`minimum-scalle=1.0`:设置允许最小缩放比例

`maximum-scale=1.0`：设置允许最大缩放比例

`user-scalable=no`：设置是否允许用户缩放


### 响应式布局

利用媒体查询为不同分辨率的设备采用不同的样式
```css
@media only screen and (max-width:800px){
  .class{
    width:50%
  }
}
```
当设备宽度小于800px时应用`width:50`样式



### 响应式图片

srcset+size
```html
<img src=“img/480.png” 
          srcset="img/480.png 480w, img/880.png 880w, img/1600.png 1600w"
          size="100vw">
```
srcset:设置不同分辨率下的图片
size：设置图片占据的视口比值   vw 视口宽度比值   vh视口高度比值

picture标签

```html
  <picture>
      <source srcset="img/1600.png" media="(min-width:800px)">
      <source srcset="img/800.png" media="(min-width:400px)">
      <img srcset="img/400.png" alt="hdjakjdhaj">
  </picture>
```
屏幕宽度大于800px时使用1600.png
屏幕宽度大于400px小于800px时使用800.png
屏幕宽度小于400px时使用400.png

pucture 和srcset size浏览器兼容不好  尤其是ie不支持
可以使用第三方picturefill库

svg（矢量图形）

### 相关兼容性问题


由于ie9 不支持flex布局  所以页面在ie9浏览器下显示效果非常不理想

可以使用容器 `flex`  项目`float`的布局方式