【前端】移动Web开发

1. 流式布局

• 流式布局：就是百分比自适应布局，即非固定像素布局，内容向两侧填充，理解成流动的布局。
• 特点：无法准确计算容器的尺寸。（因为是基于百分比的，不知道容器有多少px）

2. viewport（视觉窗口）

• 视觉窗口：是移动端特有的，这是一个虚拟的区域，这个区域用来承载网页的。它们的关系：浏览器承载viewport，viewport承载网页。

3. 适配方案

• 适配的要求：
  国际上通用的适配的方案，标准的移动端适配方案。
  1》网页的宽度必须和浏览器保持一致。（设置宽度100%）
  2》默认显示的缩放比例和PC端保持一致。（缩放比例1.0）
  3》不允许用户自行缩放网页。

• 适配设置：
  如果任何设置都没有，默认走的就是viewport的默认设置。不使用viewport的默认设置而去设置新的viewport设置，目的是达到适配要求。
  设置viewport的代码：（写在头部，网页的加载顺序是从上到下）

快捷键生成代码： meta:vp 按一下tab键

• viewport的功能（设置属性）：
  1》可以设置宽度（width）/高度（height）
  2》可以设置默认的缩放比例（initial-scale）
  3》可以设置是否允许用户自行缩放（user-scalable）
  4》可以设置最大（maximum-scale）/最小缩（minimum-scale）放比例

• 浏览器现状：移动端可以使用jquery，但是不建议
  ✋因为jquery做了很多桌面浏览器的兼容问题，特别是IE，但是移动端没有IE浏览器。
  ✋移动端主流的浏览器：谷歌、火狐（2016年停止了维护和更新）、safari浏览器、百度、360、qq等等。特点：内核基本上都是webkit，或者比webkit更高级的blink。如果要做兼容，我们都要加 -webkit-前缀。移动端建议使用H5的api，或使用zepto.js库（这个库是基于高版本浏览器开发，减少很多兼容问题）

4.base.css基本内容

/*============= reset css （清除自带样式）=============*/
*,
*::before,
*::after{
    /* 所有的标签，和伪元素都选中 */
    margin: 0;
    padding: 0;
    /*
     盒子的宽度从边框开始算（以前是从内容开始算）
     好处是：
        当改变盒子宽度的时候，不用考虑去计算padding和border
        在非固定像素的时使用，能有效防止内容溢出（即不出现滚动条）
        移动端常用布局是非固定像素

        移动端宽度和高度的计算是从 border-box 开始
        PC端宽度和高度的计算是从 content-box 开始
     */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /* 点击高亮效果的清除(点击高亮颜色为透明的) */
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;

}

body{
    font-size: 14px;
    /* 如果默认浏览器没有微软雅黑字体，就使用默认的字体 */
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;

}

ul,ol{
    list-style: none;

}

a{
    text-decoration: none;
    color: #333;

}

/* 单行输入框，或多行输入框样式 */
input,textarea{
    border: none;
    outline: none;  /* 选中的时候去掉样式 */
    resize: none;   /* 不允许改变尺寸（如：textarea右下角的三角形） */
    /*
        元素的外观（去掉输入框的立体感，即高光/低光的阴影效果）
        button：按钮的外观
        none：没有任何样式
     */
    -webkit-appearance: none;

}


/*============= common css (公共样式) =============*/

/* 添加浮动 */
/* 左浮动 */
.f_left{
    float: left;

}
/* 右浮动 */
.f_right{
    float: right;

}

/* 清除浮动 */
.clearFix::before,
.clearFix::after{
    content: "";  /* 伪元素必须要有这个 */
    /* 使用伪元素达到清除浮动的目的 */
    display: block;         /* 占位 */
    visibility: hidden;     /* 占位看不见 */
    height: 0;              /* 占位没有高度宽度 */
    line-height: 0;         /* 占位没有高度宽度 */
    clear: both;            /* 清除浮动 */
}

.m_l10{
    margin-left: 10px;
}

.m_r10{
    margin-right: 10px;
}

.m_t10{
    margin-top: 10px;
}

.m_b10{
    margin-bottom: 10px;
}

/*
    定位图标在背景图中的占位位置 / 背景图大小(压缩后的大小)
    二倍图解决失真问题，压缩图片：（原图片400×400，压缩后是200×200）
    background: url("../images/sprites.png") no-repeat 0 -103px / 200px 200px;

    【封装样式】：即，使用精灵图的公用样式

    以"icon_"开始的，或包含以" icon_"开始的样式都选中
    如：
         是以 以"icon_"开始的的样式
         是以 包含以" icon_"开始的样式
*/
[class^="icon_"], [class*=" icon_"]{
    /* 三个公告样式 */
    background-repeat: no-repeat;
    background-image: url("../images/sprites.png");
    background-size: 200px 200px;

    /* 外部只需单独去设置定位即可 */
    /*background-position: 0 -103px;*/
}

5.常见搜索框布局

    

        
        

            
            
        
        登录