# day_08

**Repository Path**: zangcenyang/day_08

## Basic Information

- **Project Name**: day_08
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 总结

## 响应式布局(RWD）

​	响应式网站设计简称（RWD）,一次开发，多端适配，从而提供完整而友好的用户体验。

实现方法

 1. 百分比布局

    对**width**、**height**、**padding**、**margin**设置百分比来适配不同的屏幕

    > 其他属性象border、font-size不能设置百分比

 2. 媒体查询(CSS3 @media )  米迪尔

    ​	利用媒体查询设置不同分辨率下的css样式，来适配不同的屏幕

    ```css
    /*屏幕宽度在400~900px之间的*/
    @media screen and (min-width: 400px) and (max-width: 900px) {
        div:nth-child(1){
            width: 50%;
        }
        div:nth-child(2){
            width: 50%;
        }
        div:nth-child(3){
            width: 100%;
        }
    }
    
    /*屏幕宽度在0~400px之间*/
    @media screen and (max-width: 400px) {
        div:nth-child(1){
            width: 100%;
        }
        div:nth-child(2){
            width: 100%;
        }
        div:nth-child(3){
            width: 100%;
        }
    }
    
    ```

3. rem响应式布局

   ​	当前页面中元素的rem单位的样式值都是针对于html元素的font-size 的值进行动态计算的，所以有两种方式可以达到适配不同的屏幕：

   ​	(1)、利用 js 动态计算赋值 

   ​	(2)、利用媒体查询，在不同的分辨率下给html的font-size赋值

   >谷歌浏览器强制设置font-size最小值12px

4. vw、vh、vmax、vmin响应式布局

   ​	vh、vw：根据设备宽高为标准，元素单位px转化为vw或vh；

   ​	vmin：取宽高中的最小值计算

   ​	vmax：取宽高中的最大值计算

   ​	比如font-size: 12px，PSD文件（设备）宽度375，转换公式12*100/375，则样式改为font-size: 3.2vw

5. flex 弹性布局

   ​	利用css3弹性布局-- flex 属性来适配不同屏幕

   ​	使用时给父元素设置display: flex，给子元素设置flex: 1，子元素会把父元素平分，子元素会随着父元素的大小改变而改变

   ```css
   /*弹性盒子属性*/
   flex-direction 		决定主轴的方向
   flex-wrap			如果一条轴线排不下，如何换行。
   flex-flow  			是以上两个属性的简写形式，默认值为row nowrap
   justify-content		定义项目在主轴上的对齐方式。
   align-items			定义项目在交叉轴上如何对齐。
   align-content  		⽤于修改 flex-wrap 属性的⾏为。设置各个⾏的对齐
   ```

   详见：https://www.runoob.com/cssref/css3-pr-flex.html（菜鸟教材）

## rem布局原理

​	rem是css的一个相对单位，相对于html根元素 ，例：html字体大小为16px，1rem=16px

原理：

​		可以通过检测屏幕大小改变html的字体大小，从而实现自适应大小的效果

​		通常750/750*100，多除100；100作为px转化为rem的换算比例，100px=1rem; 那么设计搞750px代码里就要写7.5rem;

```javascript
(function getRem(){
    //获取html根元素
	var html = document.getElementsByTagName("html")[0];
    //设备大小为body的clientWidth或者dom的clientWidth（实际宽度）
    var deviceWidth = document.body.clientWidth||
        doument.doucmentElement.clientWidth;
    //rem = 设备宽度/设计宽度*100; designWidth代表设计稿宽度
    var rem = deviceWidth / designWidth * 100;
    //设置html的font-size
    html.style.fontSize=rem + "px";
})()
getRem();//调用getRem()
window.addEventlistener('resize',function(){//屏幕宽度改变调动getRem()
	getRem();
})

```

## 数据类型判断

### 数据类型：

**六种数据类型：**

number、string、boolean、underfined、null、object

ES6：symbol （森 博儿）   独一无二的值

ES10：bigint（big  int）

### 方式一：**typeof**

typeof 可以用来判断基础数据类型，但无法判断引用数据类型（array、object）

```javascript
//用法 ：typeof 要判断的数据  或  typeof(要判断的数据)
//例：
console.log(typeof "");//string
console.log(typeof 1);//number
console.log(typeof true);//boolean
console.log(typeof null);//object
console.log(typeof underfined);//underfined
console.log(typeof []);//object
console.log(typeof function(){});//function
console.log(typeof {});//object
//返回结果为表示数据类型的字符串
```

### 方式二：**instanceof** 

判断new关键字创建的引用数据类型不包括null和underfined

```javascript
//用法： console.log( 要判断的数据 instanceof 数据类型) 例：
console.log("1" instanceof String);//false
console.log(new String(1) instanceof String);//true
console.log(1 instanceof Number);//false
console.log(new Number(1) instanceof Number);//true
console.log(true instanceof Boolean);//false
console.log(new boolean(false) instanceof boolean);//true
console.log([] instanceof Array);//true
console.log(function(){} instanceof Function);//true
console.log({} instanceof Object);//true
```

### 方式三：**constructor**

constructor 基本上可以应对基本数据类型和引用数据类型的判断，但如果声明了一个构造函数，并且把它的原型指向了Array，constructor也显得力不从心

```javascript
//用法： console.log( (要判断的数据).constructor === 数据类型 )  例：
console.log( ("1").constructor === String );//true
console.log( (1).constructor === Number );//true
console.log( (true).constructor === Boolean );//true
console.log( ([]).constructor === Array );//true
console.log( (function(){}).constructor === Function );//true
console.log( ({}).constructor === Object );//true
//声明了一个构造函数，并且把它的原型指向了Array，constructor也显得力不从心
function Fn(){}
Fn.prorotype=new Array();
var f=new Fn();
console.log( f.constructor === Fn );//false
console.log( f.constructor === Array );//true
```

### 方式四：**Object.prototype.toString.call()**  ***（推荐）***

判断数据类型的一种完美解决方案

```javascript
//用法及演示：
var a = Object.prototype.toString;
console.log( a.call("aaa") );//[object String]
console.log( a.call(1) );//[object Number]
console.log( a.call(true);//[object Boolean]
console.log( a.call(null) );//[object Null]
console.log( a.call(underfined) );//[object Underdined]
console.log( a.call([]) );//[object Array]
console.log( a.call(function(){}) );//[object Function]
console.log( a.call([]) );//[object Object]
//声明了一个构造函数，并且把它的原型指向了Array
function Fn(){};
Fn.prototype=new Array();
console.log( Object.prototype.toString.call(Fn) );//[object Function]
```

##