CSS移动端学习meta视口标签及特殊样式，流式布局（百分比布局）

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

1、meta视口标签

initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

2、移动端特殊样式

a {         /* 去除高亮显示 */
            -webkit-tap-highlight-color: transparent;
            /* 避免用户长按弹出菜单 */
            -webkit-touch-callout: none;
        }
        
        input {
 
            /* 去除了默认的样式后可以给按钮和输入框自定义样式 */
            -webkit-appearance: none;
        }

3、流式布局（百分比布局）

跟随屏幕大小缩放，适应屏幕·，但是如果里面有内容，缩放很小了就被挤走了。

为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局。

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。 流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度 。

section {
            width: 100%;
            margin: 0 auto;
            max-width: 980px;
            min-width: 320px;
            /* 到了这个数值就不会缩小或者放大了 */
        }

/* 到了这个数值就不会缩小或者放大了 */