html自适应手机、平板问题

1.1 meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

viewport标签极其属性：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

每个属性的详细介绍：

对了device-width好像是设备视窗宽度的意思，没有详细查询，如有人知道留言，这里就不作注解

1.2 @media

/* 小屏幕手机端 */
@media (min-width: 0px) and (max-width:768px) {
    .div1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 768px) and (max-width:992px){
    .div1{
        width: 300px;
        height: 300px;
        background-color: blue;
    }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 992px) {
    .div1{
        width: 500px;
        height: 500px;
        background-color: aqua;
    }
}

1.3 文字自动换行

html内容超出了div或p的宽度 让内容自动换行

{
    width: 100%;  
    height: auto;  
    word-wrap:break-word;  
    word-break:break-all;  
    overflow: hidden;  
}
   

1.3.1 word-wrap

word-wrap: normal|break-word;

word-break: normal|break-all|keep-all;