文章目录
- 前言
- 一、web移动端是什么？
- 二、如何调试移动web网页
- 1.真机调试：
- 2.chrome浏览器调试：
- 3.移动Web的发展历史
- 三.移动Web布局核心思想
- 1.不允许网页出现横向滚动
- 2.页面盛满屏幕，盒子宽度与屏幕一致 100%
- 3.让盒子的内容宽高width/height包含padding与border，避免出现横向滚动条
- 四.移动Web布局方式介绍
- 五补充知识点-(止渴可用)
- 总结
前言
移动端是前端攻城狮一定要会的知识点,这里我将会初步介绍什么是web移动端以及他常用的布局
一、web移动端是什么？
运行在移动设备的网页(web)，称之为移动端网页(移动web)。所谓的移动设备泛指：手机，平板。
二、如何调试移动web网页
1.真机调试：
后期我会给大家详细介绍
2.chrome浏览器调试：
和PC端网页一样，首先按F12打开开发者工具，然后点击做下表手机图标即可(见下图)
- 移动端网址特点：以m开头
- 例如：PC端的京东首页是<www.jd.com>,那么移动端京东首页就是<www.m.jd.com>
小技巧：在PC端进入任何网页之后，切换到移动web页面刷新网页，就会自动打开移动端网页
3.移动Web的发展历史
-
从2014年HTML5正式定稿后移动web就迎来了飞速的发展 因为使用HTML5技术可以更方便 更快捷的开发现代web应用程序
-
而移动端的手机浏览器都是比较新的 HTML5在移动端的浏览器支持情况都比较好
-
所以HTML5主要应用就是在移动端 移动web
-
直到2015 - 2016 - 2017 - 至今 移动web已经发展了很多年 各方面的技术都比较成熟稳定 网上的教程也比较完整成熟 所以现在的web已经到全民移动web的时代了
常见的移动Web页面结构(从上往下)：广告栏banner、搜索栏、轮播图、导航栏、商品列表、底部tabbar
三.移动Web布局核心思想
1.不允许网页出现横向滚动
- 移动端一般只适配宽度盛满整个屏幕，高度从上往下滚动
- pc端布局一般都是使用固定宽度，水平居中且两边留白的方式来布局，所以pc端不用考虑显示屏的宽度，而移动端布局是采用全屏的方式布局，既然是全屏，就要考虑屏幕的适配，因为不同的手机的屏幕宽度是不一样的
2.页面盛满屏幕，盒子宽度与屏幕一致 100%
3.让盒子的内容宽高width/height包含padding与border，避免出现横向滚动条
四.移动Web布局方式介绍
(1)流式布局(百分比布局)- px不写死，使用%百分比实现比例布局
(2)flex伸缩布局(弹性布局)(3)rem布局- 以html元素字体大小作为单位. 1rem = html字体大小
(4)响应式布局- 注意：以上的布局方式不是每种页面只能使用一种，而是根据实际需求灵活搭配，只要能实现产品经理的需求，使用任何方式都可以(不管黑猫白猫，抓到老鼠就是好猫)
每种布局方式没有优劣之分，只是各自特点不同，所适用的场景不同而已- 例如：能使用百分比就使用百分比，如果百分比不能用，就使用rem，如果rem不能用，就使用固定宽高，总之怎么舒服怎么来。
五补充知识点-(止渴可用)
1.什么是私有前缀
- 浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。 因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。
- 在移动端，仅有四个独立的浏览器内核，分别为微软的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。
目前微软的Trident在移动终端上主要为WP7、8系统内置浏览器。Opera的Presto内核主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版。Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌Chrome(Android4.0使用) 都是基于Webkit开源内核开发的。 - UC、Android内置、Chrome、Safari、QQ Browser都是webkit内核，从图上看占了绝大部分的市场份额。
所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-，别的兼容比如-ms-都不写
.box{-webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; transition:all 1s;
}
总结
本章内容只是对web移动端做一个初步的介绍,后续会建立一个专门讲解web移动端的专栏,进行详细的分享!
