一、下面我将简单的介绍移动端布局的八种方式：1.固定布局2.流动布局3.浮动布局4.定位布局5.混合布局6.flex布局7.rem布局8.响应式布局9.**圣杯布局10.**双飞翼布局1.固定布局方法里把加好，然后根据设计稿设定相应的宽度即可，其他地方类似于pc端。优点思路沿用pc端，上手比较快缺点大屏手机显示网页比较宽，而固定布局宽度参照永远是固定的宽度（设计稿的大小），导致左右两边会有空白...

　　1.@mediascreen实现网页布局的自适应优点:无需插件，能够适应各种窗口大小，只需在CSS中添加@mediascreen属性。官方文档：@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。语法：@mediamediatypeand|not|only（mediafeature）{CSS-Code;}紧...

　　PC端通用布局方案思路：1.先写出HTML的结构页眉、主体（内容区）、页脚2.然后初始化样式通常用3.然后考虑去除一些公共样式去除的序列号和标签的下划线4.将页眉、内容区、页脚设置弹性容器，并为主轴垂直排列。将内容区三部分设置为主轴为水平排列的弹性容器5.页眉部分：将页眉部分的子元素也设置为弹性容器，然后再交叉轴上居中排列。然后让里面的a标签以及内容设置字体大小、颜色以及文本...

　　移动端的适配，我理解为两点：第一点就是视口的缩放配置，牵扯出视口和像素等概念。目的是为让我们的CSS样式中逻辑像素匹配到手机终端的物理像素，让网页视图适合手机屏幕。虽然在代码中只是一个语句就解决的问题，但要理解它，要弄懂很多概念。《关于像素Pixel历史的详解看下一篇文档》第二点就是rem单位的使用，目的是为了我们只需要一份代码就可以适应大部分不同屏幕的手机。以上两点虽然实现的目的不同，但采用...

　　流式布局rem布局视口布局手淘团队flexible.js设备区间划分逻辑像素和物理像素pc:1物理=1逻辑移动端：1物理=？逻辑（根据系统去定）逻辑像素指的是css像素也就是我们写代码的px移动端布局第一步视口：呈现网页的介质，窗口获取设备宽度案例1：大屏：box盒子黑色背景中红色小粉色超小红色自适应----》原理：盒子宽度尽量用%表示高度可以定...

　　1.JS的根据不同屏幕宽度动态设置html的font-size，使用rem布局。a.手淘方案flexible+rem（参考引入flexible.js，不需要在html结构中加入viewport标签。flexible.js会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3；同时会给html加上对应的font-...

　　我们利用flex弹性布局来快速完成一个PC端通用布局的解决方案，以后遇到类似布局可以直接仿照当前布局方案来做代码：效果：PC端的通用布局大体上就这样，可以仿照这个flex自己动手试试注：图中为了演示效果把高度都调低了实际开发科根据自身需求调节高度大小接下来我们利用flex弹性布局来快速完成一个移动端通用布局的解决方案，以后遇到类似布局可以直接仿照当前布局方案来做代码：效果图：注：以上主要代...

　　这就是一个无序列表（）里有三个列表元素（）。你可以把称为父元素，称为子元素。要开始使用Flexbox，必须先让父元素变成一个Flex容器。你可以在父元素中显式的设置或者。这样你就可以开始使用Flexbox模块。实际是显式声明了Flex容器之后，一个Flexbox格式化上下文（Flexboxformattingcontext）就立即启动了。使用一个无序列表（）和一群列表元素（），启动Flex...

　　这个是移动端页面开发必备的标签，用来调整布局视口同视觉视口一致，禁止页面缩放等。apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。语法：说明：如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。如果选择全屏模式运行，则会删除默认的苹果工具栏和菜单栏。说明：这个标签起作用的前提是...

　　调用系统功能使用能快速调用移动设备的三大通讯功能，使用能快速调用移动设备的的。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被忽略。忽略自动识别有些会自动将数字字母符号识别为并将其渲染成上述调用系统功能里的。虽然很方便却有可能违背需求。弹出数字键盘使用弹起数字键盘会带上和，适合输入电话。推荐使用弹起数字键盘，适合输入验证码等纯数字格式。唤醒原生应用通过与原生应用建立通讯渠道...