零基础第十二章-移动端

零基础第十二章-移动端

39.00元

box-sizing:border-box;    怪异盒模型,盒子的宽度包含边框以及padding

 

18、rem布局2

1、需要找一个手机作为基准,以iphone6为基准;

2、设计的图需要按iPhone6的物理像素的两倍(750*1334)来设计,在写代码时候,要把量到的尺寸除以2;

3、

 

alert(window.devicePixelRatio)//获取到像素比

[展开全文]

17、rem布局

rem  相对于根节点字体大小的值

em  相对于字体大小的值

 

[展开全文]

15、弹性布局-多行对齐

flex-wrap:wrap;

align-content:flex-start;   顶部对齐

align-content:flex-end;   底部对齐

align-content:center;   中间对齐

align-content:space-between;   垂直两端对齐

align-content:space-around;   垂直分散对齐

align-content:stretch;   默认对齐

 

16、弹性布局-子元素的属性

flex:1;

占了几分,百分比

父级来个display:flex,子级元素就可以按flex去分了

[展开全文]

13、弹性布局-水平对齐

justify-content:flex-start;  子元素是居左对齐(默认)

justify-content:flex-end;  子元素是居左对齐

justify-content:center;  子元素是居左对齐

justify-content:space-between;  子元素分散居中对齐(两边对齐)

justify-content:space-around;  子元素分散居中对齐;

 

14、弹性布局-垂直对齐

align-items:flex-start;  子元素上边对齐

align-items:flex-end;    子元素下边对齐

align-items:center;     子元素中心点对齐

 

[展开全文]

弹性布局-排序

display:flex;     //父级设置这个属性以后,子元素的float,clear,verticle-align就会失效

flex-direction:row;     从左到右排序(默认值)

flex-direction:row-reverse;    从右到左排序(右对齐)

flex-direction:coliumn;    从上到下排序

flex-direction:column-reverse;   从下到上排序

 

弹性布局-换行

flex-wrap:nowrap;    //不换行(默认),即使子元素的宽度和超过了父级的宽度,他们也不会换行,并且会自动把宽度缩小,能够在一行中显示

flex-wrap:wrap;    //正常换行

flex-wrap:wrap-reverse;    //会把换行后的子元素调换位置

 

弹性布局-布局流

flex-flow:row nowrap;    //默认

排序换行的简写

 

[展开全文]

百分比布局

width:30%;

一行中所有的数值加起来不超过100%,超过的话会换行

[展开全文]

移动端的布局方法

1.media

2.百分比布局

3.弹性布局(flex)   css3新出的

4.rem

 

media布局

<link rel="stylesheet"  href="/.css"  media="(max-width:200px)"    />

[展开全文]

3、viewport

<meta name="viewport"  content="width=device-width,height=device-height,user-scalable=no,minimum-scale=1.0,maxmum-scale=1.0,target-densitydpi=device-dpi" />

<meta name="viewport"  content="width=device-width,user-scalable=no" />

meta标签里的content

viewport     视口

width    屏幕的宽度

device-width   设备的实际宽度

数值    不建议这么做,在安卓手机不支持

height    屏幕的高度

device-height   设备的实际高度

数值    不建议这么做,在安卓手机不支持

user-scalable   能否缩放

yes    允许缩放

no     不允许缩放,一般禁止

minimum-scale   最小能够缩放的倍数

target-densitydpi=device-dpi    苹果手机不支持

 

 

 

[展开全文]
xcoolzhe · 2017-08-16 · 3-viewport 0

媒体查询

 

[展开全文]
xcoolzhe · 2017-08-15 · 4-媒体查询 0

网络环境模拟

network conditions

network throttling   模拟网络环境

sensors   传感器

geolocation   地理信息,经纬度海拔等

orientation

α    Y轴的旋转  alpha

β    X轴的旋转  beta

γ    Z轴的旋转   gama

touch

[展开全文]
xcoolzhe · 2017-08-14 · 2-测试环境-2 0

1.测试环境

不存在兼容性问题

谷歌浏览器模拟手机环境的工具

375*667    物理像素,最终显示给用户的分辨率

750*1334    独立像素,厂家在出厂的时候设置的屏幕分辨率

2   DPR,像素比,缩放的比例

[展开全文]
xcoolzhe · 2017-08-14 · 1-测试环境-1 0

布局方式:

1. media

2. 百分比布局

3. 弹性布局(flex)

4. rem

 

media 布局方式:

<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="./css/media1.css" media="(max-width: 200px)">
<link rel="stylesheet" href="./css/media2.css" media="(min-width: 200px) and (max-width: 420px)">
<link rel="stylesheet" href="./css/media3.css" media="(min-width: 420px)">
[展开全文]
// 媒体查询
@media all and (min-width: 400px)
// 横屏
@media all and (orientation: landscape)
// 竖屏
@media all and (orientation: portrait)
[展开全文]

iPhone6

375 x 667 物理像素:最终显示给用户的分辨率。

750 x 1334 独立像素:手机出厂时设置的屏幕分辨率。

DPR 像素比,缩放比例。

[展开全文]
zhangbao · 2017-08-04 · 1-测试环境-1 0

弹性布局-多行对齐

.box{
	width: 300px;
	height: 800px;
	display: flex; 
	border: 1px solid red;
	flex-wrap: wrap;
	align-content: flex-start;      /*子元素顶对齐*/
	align-content: flex-end;		/*底对齐*/
	align-content: center;			/*居中对齐*/
	align-content: space-between;  /*垂直分散布局(两端对齐)*/
	align-content: space-around;   /*垂直分散布局*/
	align-content: stretch;        /*默认对齐*/
}

弹性布局-子元素属性

.box{
	display: flex; 
	border: 1px solid red;
}
.box div{
	height: 100px;
}
.box div:nth-of-type(1){
	background: red;
	flex: 2;
}
.box div:nth-of-type(2){
	background: blue;
	flex: 1;
}
.box div:nth-of-type(3){
	background: deeppink;
	flex: 1;
}

 

[展开全文]

弹性布局-水平对齐

.box{
	width: 800px;
	display: flex; 
	border: 1px solid red;
	justify-content: flex-start;     /*子元素居左对齐(默认)*/
	justify-content: flex-end;       /*子元素居右对齐*/
	justify-content: center;         /*子元素居中对齐*/
	justify-content: space-between;  /*子元素分散居中对齐(左右两边对齐)*/
	justify-content: space-around;   /*子元素分散居中对齐*/
}

弹性布局-垂直对齐

.box{
	width: 800px;
	display: flex; 
	border: 1px solid red;
	align-items: flex-start;  /*顶对齐(默认)*/
	align-items: flex-end;    /*底对齐*/
	align-items: center;      /*垂直居中对齐*/
}

 

[展开全文]

弹性布局-排序

.box{
	display: flex;                   /*父级设置这个属性后,子元素的float、clear、verticle-algin就会失效*/
	border: 1px solid red;
	flex-direction: row;             /*子元素从左到右排序(默认值)*/
	flex-direction:row-reverse;      /*子元素从右到左排序*/
	flex-direction:column;           /*子元素从上到下排序*/
	flex-direction:column-reverse;   /*子元素从下到上排序*/
}
.box div:nth-of-type(1){
	background: red;
}
.box div:nth-of-type(2){
	background: blue;
}
.box div:nth-of-type(3){
	background: deeppink;
}
.box div:nth-of-type(4){
	background: green;
}

弹性布局-换行

.box{
	display: flex;
	border: 1px solid red;
	flex-wrap: nowrap;       /*不换行(默认),即使子元素的宽度和超过父级的宽度,它们也不会换行,会把宽度自动缩小,在同一行显示*/
	flex-wrap: wrap;         /*正常换行*/
	flex-wrap: wrap-reverse; /*换行的子元素调换位置(换行元素显示在不换行元素的上面一行)*/
}

弹性布局-布局流

.box{
	display: flex; 
	border: 1px solid red;
	flex-flow: row nowrap;         /*默认(子元素从左到右排序,不换行)*/
	flex-flow: row-reverse wrap;   /*从右到左排序,正常换行*/
	flex-flow: row-reverse wrap-reverse;/*从右到左排序,往上换行*/
}

 

[展开全文]

targent-densitydpi=device-dpi

[展开全文]
孤魂 · 2016-10-23 · 3-viewport 0

授课教师

金牌讲师