|
移动端开发选择：
1、移动端和PC端单独分开制作；2、移动和PC合在一起，通过响应式区分布局。
1、移动端基础
1.1 浏览器现状
PC浏览器、移动端浏览器
总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
2、视口
视口：浏览器显示页面内容的区域；布局视口、视觉视口、理想视口。
2.3 理想视口
使网站在移动端有最理想的浏览器和阅读宽度而设定。需要手动添加meta视口标签来通知浏览器操作。meta的目的：布局视口宽度应该和理想视口宽度一致；
2.5视口标签 width：device-width 设备宽度； initial-scale：初始缩放比，大于0的数字； maximum-scale：最大缩放比，大于0的数字； minimum-scale：最小缩放比,大于0的数字； user-scalable：用户是否可以缩放，yes或是no（1或是0）
3、二部图（多倍图，防止图片模糊）
物理像素：屏幕显示的最小颗粒，是物理真实存在的。PC端中1px等于一个物理像素，但是在移动端就不一样；
物理像素比：一个px能显示的物理像素点的个数，成为物理像素比或是屏幕像素比；
二倍图：需要5050的图片，放到移动端会被放大2倍，会模糊；所以要用100100的图片，缩小2倍来使用，放到移动端后再放大，就合适了；
背景缩放：background-size：背景图片宽度 背景图片高度；（只写一个的话，就是宽度，高度等比例缩放）（像素px，百分比%，）
background-size：cover（完全覆盖盒子，即使有部分显示不全）；
background-size：contain（高度和宽度等比例拉伸，当高度或是宽度铺满了，就不再拉伸了。）；
二倍精灵图做法
在firwork里面把精灵图等比缩放为原来的一半
之后根据大小测量坐标，附在图片路径后面；（坐标：-81px 0）
注意代码里面background-size也要写：精灵原来宽度一半（宽度：200px auto）；
如：
background: url(…/images/jd-sprites.png) no-repeat -81px 0;
background-size: 200px auto;
CSS3盒子模型：
传统盒子模型=width+border+padding
CSS3盒子模型标识：box-sizing：border-box；（padding和border不会再撑大盒子模型）
5特殊样式：
/CSS3盒子模型/
box-sizing：border-box;
-webket-box-sizing：border-box；
/去除高亮样式/
-webket-tap-highlight-color:transparent;
-webket-appearance:none;
/禁用长按页面时弹出来菜单/
img，a{-webkit-touch-callout：none;}
/CSS初始化/
引入 normalize.css
6、移动端的布局
-
单独制作移动端页面（主流）
流式布局（百分比布局）
通过盒子的宽度设置百分比来进行伸缩，不受固定像素限定。 flex弹性布局（强烈推荐）
任何容器都可以指定为flex布局；
当父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将失效。 less+rem+媒体查询布局
em：相对于父元素 字体大小来决定；
rem：相对html元素 字体大小来决定；
媒体查询：可以针对不同的屏幕尺寸设置不同的样式
**混合布局**
-
响应式页面兼容移动端（其次）
媒体查询 bootstarp
flex弹性布局
采用了flex布局的元素，称为flex容器，其子元素自动成为容器成员，称为flex项目 。
原理：通过给父盒子添加flex属性（display: flex;），来控制盒子的位置和排序方式。
flex-direction:设置主轴的方向；
row：默认从左到右；（默认）
row-reverse：从右到左；
column：从上到下；
column-reverse：从下到上
justify-content:设置主轴上子元素排序方式
flex-start：从左到右
flex-end：从尾部开始（右到左）
center：在主轴居中对齐；
space-around：平分剩余空间；
space-between：先两边贴边，在平分剩余空间
flex-wrap：设置子元素是否换行，
nowrap：默认不换行，如果装不下，会缩小子元素的宽度。
wrap：换行；
align-items： 设置侧轴的子元素排序方式（单行时候使用）
flex-start：默认上到下
flex-end：从下到上
center：挤在一起居中（垂直居中）；
stretch：拉伸；
align-content:设置侧轴上的子元素的排序方式（仅在多行时候其效果，单行的时候不起效果）
flex-start:默认在侧轴的头部开始排列；
flex-end：在侧轴尾部开始排列；
center：在侧轴中间显示；
space-around：子项在侧轴平分剩余空间；
space-between：子项在侧轴先分布在两头，再平分剩余空间；
stretch：设置子项元素高度平分父元素高度；
flex-flow：flex-direction和flex-wrap的符合属性
flex-flow：row wrap；
flex-flow子项属性
flex属性：定义子项目分配剩余空间的占有份数。
.item{
flex:; /default 0/
}
align-self：控制子项自己在侧轴上的排列方式。
允许单个项目有与其他项目不一样对齐的方式，可覆盖align-items属性。默认为auto，标识继承父元素的align-items属性，如果没有父元素，则等同于stretch；
order：定于项目的排列顺序，默认为0，数值越小排列约靠前。
less+rem+媒体查询布局
em：相对于父元素 字体大小来决定；
rem：相对html元素 字体大小来决定；
媒体查询：可以针对不同的屏幕尺寸设置不同的样式
媒体类型：将不同的设备划分为不同的类型，称为媒体类型。
all：用于所有设备；
print：用于打印机和打印预览；
scree：用于电脑屏幕，平板电脑，智能手机等。
关键字：and，
less
安装：1、安装node.js （看看安装成功没：node -v）
2、安装less： npm install -g less （查看：lessc -v）
变量：@color （命名必须以@开头，不能有特殊字符，不能有数字）
编译：安装 Easy less即可。
运算：1、运算符左右必须要有空格。
2、两个数运算，如果只有一个数有单位，结果就以这个单位为准。
3、两个数运算，如果两个数都有单位，最后结果以第一个单位为准。
备注：calc(50% - 1.5rem)公式法。
rem实际开发适配：
元素大小取值方法：
页面元素的rem值=页面元素px / html font-size 字体大小。
响应式开发
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。原理是通过不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小。
Bootstrap框架使用：
1、创建文件夹结构
新建一个文件夹叫 Bootstrap，用来存储Bootstrap下载的文件内容。
2、创建html骨架结构
加入关键内容
3、引入相关样式文件
4、书写内容
Bootstrap布局容器：
1、.container类 系统预定的类
大屏（>=1200px）宽度固定为1170px
中屏（>=992px）宽度固定为970px
小屏（>=768px）宽度为750px
超小屏（100%）
2、container-fluid类
流式布局容器，百分百宽度
占据全部视口的容器
适合单独做移动端开发
3、栅格系统参数
大屏（>=1200px）宽度固定为1170px .col-lg-
中屏（>=992px）宽度固定为970px .col-md-
小屏（>=768px）宽度为750px .col-sm-
超小屏（100%） .col-xs-
- 行必须放到container布局容器里面。
- 列column大于12，多余的列所在的元素，将被作为一个整体另起一行排列
- 每列默认有左右15个像素的padding
- 可以为一列指定多个设备类名，如class=“col-md-4 col-sm-6”
|