一，前期准备工作

现阶段移动端页面制作有多种技术类型，我们可以根据自己的需求去选择所需要的技术类型

移动端有专门的 CSS 初始化 normalize.css，以及关于移动端的meta标签的引用，还有对其初始化设置

/* 对点击高亮进行清除，设置transparent 完成透明 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 在移动端浏览器默认的的外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
input {
    -webkit-appearance: none;
}

/* 禁用长按页面时弹出来的菜单 */
img,
a {
    -webkit-touch-callout: none;
}

具体可以看这篇文章移动端 - 掘金 (juejin.cn)

二，网站的一些技术细节

1，流式布局

流式布局技术相对来说较为简单，他给外层盒子设置百分比的width让他们的宽度在缩放时可以按百分比去实现

2，关于flex

关于flex属性你见过如此可爱的flex吗？ - 掘金 (juejin.cn)的一些技术问题有在这篇文章提及到，在实际应用中我们在给设置flex时可能不止给父级，也可能是给子集设置去flex子集去设置flex技术影响子子级；

像这个布局我们给div设置flex是为了让div的子盒子a排成一排，然后我们又给a设置flex，还有主侧轴居中，是为了让a盒子下面的子盒子可以居中显示，所以我们运用到了两条flex，我们在实际应用中应该根据自己有什么样的需求，对应去想应用哪一条flex属性代码去实现；

3，rem+less+媒体查询

理解rem、媒体查询、less - 掘金 (juejin.cn)

我们应用这个技术先给主要是利用媒体查询宽度的变化去改ia变html的font-size大小从而可以影响rem值的大小，从而做到放大缩小的时候页面去缩放变化

而用了less语言可以实现less的计算，以及less的@名字：数值；可以方便我们后期对页面的直接修改和维护

@no: 15;

html {
    font-size: 50px;
}

// 320px
@media screen and (min-width:320px) {
    html {
        font-size: (320px / @no);
    }
}

// 360px
@media screen and (min-width:360px) {
    html {
        font-size: (360px / @no);
    }
}

// 375px iphone6,7,8
@media screen and (min-width:375px) {
    html {
        font-size: (375px / @no);
    }
}

@media screen and (min-width:384px) {
    html {
        font-size: (384px / @no);
    }
}

@media screen and (min-width:400px) {
    html {
        font-size: (400px / @no);
    }
}

@media screen and (min-width:414px) {
    html {
        font-size: (414px / @no);
    }
}


@media screen and (min-width:424px) {
    html {
        font-size: (424px / @no);
    }
}

@media screen and (min-width:480px) {
    html {
        font-size: (480px / @no);
    }
}

@media screen and (min-width:540px) {
    html {
        font-size: (540px / @no);
    }
}

@media screen and (min-width:720px) {
    html {
        font-size: (720px / @no);
    }
}

@media screen and (min-width:750px) {
    html {
        font-size: (750px / @no);
    }
}

4，关于#bootstrap

bootstrap - 掘金 (juejin.cn)

他相当于把自己的一套技术类名放在了一个库里面，我们可以去查找我们需要的技术代码，然后去直接引用类名调用实现我们想要的效果

还有一个就是他的栅格系统，当我们调用了他的栅格系统，就把页面分为12个小格子，然后根据他的规则去实现我们的布局，包括在某一个些页面我们可以实现让盒子出现或者消失，以及结合媒体查询可以让某一些盒子在某个页面设置大小级布局；

关于如何制作移动端页面