挪动端会将视口缩放到运动端窗口的深浅,将视口的轻重设置为和活动装备可视区一样的高低

活动端页面布局

举手投足端页面布局

一、移动端app分类

一、移动端app分类

1、Native App原生app手机应用程序

  使用原生的语言开发的无绳电话机使用,Android系统用的是java,ios系统用的是object-C

1、Native App原生app手机应用程序

  使用原生的言语开发的无绳电话机使用,Android系统用的是java,ios系统用的是object-C

2、Hybrid App 混合型app手机应用程序

  混合使用原生的顺序和html5页面开发的手机应用

2、Hybrid App 混合型app手机应用程序

  混合使用原生的程序和html5页面开发的无绳电话机使用

3、Web App 基于Web的app手机应用程序

  完全使用html5页面加前端js框架开发的无绳电话机使用

3、Web App 基于Web的app手机应用程序

  完全使用html5页面加前端js框架开发的无绳电话机使用

二、Viewport视口

  视口是移动设备上用来展现网页的区域,一般会比移动装备可视区域大,宽度或许是980px恐怕1024px,目的是为了显得下所有为PC端设计的网页,这样带来的结局是移动端会并发横向滚动条,为了防止那种情状,移动端会将视口缩放到活动端窗口的尺寸。那样会让网页不易于见到,可以用meta标签,name=”viewport”来安装视口的高低,将视口的高低设置为和移动装备可视区一样的大小。

  在移动端用来承载网页的那么些区域,就是大家的视觉窗口,viewport(视口),那个区域可以安装中度小幅,可以按百分比放大裁减,而且能安装是或不是允许用户自动缩放。

二、Viewport视口

  视口是运动设备上用来彰显网页的区域,一般会比移动设备可视区域大,宽度大概是980px仍然1024px,目标是为了显得下整个为PC端设计的网页,那样带来的结果是移动端谋面世横向滚动条,为了防止那种气象,移动端会将视口缩放到活动端窗口的大大小小。那样会让网页不易于见到,能够用meta标签,name=”viewport”来设置视口的尺寸,将视口的深浅设置为和活动设备可视区一样的轻重。

参数表明:

width:宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale:初始缩放比,大于0的数字
maximum-scale:最大缩放比
minimum-scale:最小缩放比
user-scalable:用户是否可以缩放,yes或no(1或0)

<!--viewport只有移动端才能识别-->
<!--设置宽度  设置成和设备一样的宽度(width=device-width)-->
<!--设置默认的缩放比  initial-scale =1.0-->
<!--设置是否允许用户自行缩放  user-scalable   no yes-->

设置情势如下:

设置格局如下:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

<meta name=”viewport” content=”width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0″>

PC页面在三哥大缩放的由来:

1、iphone默认的viewport980px ,user-scalable=yes
2、那么initial-scale在320px的浏览器上就是320/980 为0.33333

三、PC及运动端页面适配方法

设备有各类不同的分辨率,页面适配方案有如下两种:

总结:

用meta标签把viewport的幅度设为device-width,同时initial-scale=1.user-scale=0就创设了一个正式的位移web页面

1、全适配:流体布局+响应式布局

 

2、移动端适配:

  a、流体布局+少量响应式

  b、基于rem的布局

  c、弹性合模型

三、PC及运动端页面适配方法

配备有多样差距的分辨率,页面适配方案有如下二种:

a、流体布局

  就是行使百分比来设置元素的幅度,成分的冲天按实际上中度写固定值,流体布局中,成分的边线(border)不只怕用百分比,可以选取样式中的总计函数calc()来设置宽度,恐怕应用box-sizing属性将盒子设置为边线计算盒子尺寸。

1、全适配:流体布局+响应式布局

1、calc()  可以由此测算的法门给成分加尺寸。比如:width:calc(25% – 4px);

2、移动端适配:

  使用百分比自适应布局(流式布局)同时需求对运动端的viewport视口进行设置,就足以已毕适配的目标

  a、流体布局+少量响应式

  b、基于rem的布局

  c、弹性合模型

2、box-sizing

  a、content-box 默许的盒子尺寸总计方法。

  b、border-box
置盒子的尺寸计算方法为从边框起头,盒子的尺码,边框和内填充算在盒子尺寸内

图片 1

a、流体布局

  就是使用百分比来设置成分的小幅,成分的万丈按其实中度写固定值,流体布局中,成分的边线(border)不能用百分比,能够使用样式中的计算函数calc()来设置宽度,大概拔取box-sizing属性将盒子设置为边线总括盒子尺寸。

响应式布局

  响应式布局就是选用媒体询问的格局,通过查询浏览器的肥瘦,不同的肥瘦应用差距的体制块,逐个样式块对应的是该增幅下的布局情势,从而落成响应式布局,响应式布局的页面可以适配三种终极屏幕(pc、平板、手机)。

相应布局的伪代码如下:

图片 2

1、calc()  可以经过测算的格局给成分加尺寸。比如:width:calc(25% – 4px);

b、基于rem的布局

2、box-sizing

  a、content-box
默许的盒子尺寸总结方法。

  b、border-box
置盒子的尺码总括方法为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内

图片 3

1、em单位是参照成分本身的文字大小来设置尺寸

图片 4图片 5

响应式布局

  响应式布局就是应用媒体询问的章程,通过询问浏览器的幅度,区其他幅度应用不同的样式块,各种样式块对应的是该增幅下的布局格局,从而完结响应式布局,响应式布局的页面可以适配四种极端显示屏(pc、平板、手机)。

对应布局的伪代码如下:

图片 6

2、rem指的是参考根节点的文字大小。

b、基于rem的布局

  根节点指的是html标签,设置html标签的大大小小,其他的因素相关尺寸设置用rem,这样,所有因素都有了联合的参考标准,改变html文字的深浅,就会改变所有因素用rem设置的尺寸大小。

 图片 7图片 8

1、em单位是参考成分本身的文字大小来设置尺寸

图片 9图片 10

 cssrem安装:cssrem插件可以动态地将px尺寸换算成rem尺寸

  下载本项目,比如:git clone https://github.com/flashlizi/cssrem
进入packages目录:Sublime  Text-》Preferences-》Browse  Packages
 复制下载的cssrem目录到刚刚的packages目录里。重启Sublime  Text。

  配置参数  参数配置文件:Sublime  Text-》Preferences-》Package
 Settings-》cssrem 里面有个px_to_rem
(意思是px转rem的单位比例,默许为40)。max_rem_fraction_length(px转rem的小数部分最大的尺寸。默许为6)。availiable_file_types
启用此插件的文件类型。默许为:[“.css”,”.less”,”sass”,”.html”]。

图片 11

2、rem指的是参照根节点的文字大小。

c、弹性盒模型布局

  根节点指的是html标签,设置html标签的大大小小,其余的成分相关尺寸设置用rem,那样,所有因素都有了统一的参照标准,改变html文字的轻重,就会转移所有因素用rem设置的尺码大小。

 图片 12图片 13

1、容器属性 display:flex  表明使用弹性盒布局(全体都是在父成分上设置)

采取display:flex相对于把子成分变为行内块成分,并且之间不会暴发间隙。

图片 14图片 15图片 16图片 17

  确定子成分排列的样子: flex-direction:row |
row-reverse|column|column-reserve

  a、 flex-direction:row **默许子成分水平靠左排列

图片 18图片 19

 b、 flex-direction:row-reverse
 
子成分靠右倒序排列,类似于右浮动

图片 20图片 21

 c、 flex-direction:column;
竖排

 图片 22图片 23

 d、 flex-direction:column-reverse; 倒序竖排

 图片 24图片 25

  成分超越父容器尺寸时是或不是换行: flex-wrap:nowrap|wrap|wrap-reverse

  a、flex-wrap:nowrap;
子元素宽度超越父级宽度时,默许不换行  

图片 26图片 27

b、flex-wrap:wrap;
子成分宽度当先父级宽度时,换行 

 图片 28图片 29

c、flex-wrap:wrap-reserve;
子成分宽度当先父级宽度时,倒序换行 

 图片 30图片 31

 同时设置flex-direction | flex-wrap如:
flex-flow:flex-direction | flex-wrap  flex-flow:row  wrap;

**  子成分的尺码规定之后,用此属性来设置flex-direction定义方向上的遍布方式:justify-content:flex-start
| flex-end | center | space-between | space-around**

**  a、justify-content:flex-start
 全部子成分靠左**

图片 32图片 33

**  b、justify-content:flex-end
 全部子成分靠右**

 图片 34图片 35

**c、justify-content:center
 全部子成分居中**

 图片 36图片 37

**d、justify-content:space-between
 第二个子元素靠左顶格,最后一个子成分靠右顶格,中间子成分均分距离**

 图片 38图片 39

**e、justify-content:space-around
 第三个子成分靠左的间隔和尾声一个子成分靠右的间距是当中子成分间距的一半,中间的因素等分间距。**

 图片 40图片 41

  子成分的尺寸规定今后,用此属性来安装flex-direction定义方向上的垂直方向的遍布格局:align-items:flex-start
| flex-end | center | baseline | stretch

**  a、align-items:flex-start
 全部垂直靠上排列**

**图片 42图片 43**

**b、align-items:flex-end
 全部垂直靠下排列**

 图片 44图片 45

**c、align-items:center
 全部子成分垂直居中(也能够动用margin或padding或稳定来促成)**

 图片 46图片 47

**d、align-items:baseline
 子成分内的文字尾部对齐,假诺文字大小差别,会造成子成分尾部不对齐**

 图片 48图片 49

ealign-items:stretch
 若是子成分不安装中度,中度会被拉伸到和父成分中度一致(除去本身的margin)**

图片 50图片 51

  设置多行子成分在行方向上的对齐格局:align-content
: flex-start | flex-end | center | space-between | space-between |
space-around | stretch

a、align-content : flex-start
 多行完全靠上排列**

**图片 52**图片 53**

b、align-content : flex-end
多行完全靠下排列**

**图片 54图片 55**

**c、align-content :center
多行完全居中排列**

**图片 56图片 57**

**d、align-content:space-between
 第一行子元素靠上顶格,最终一行子成分靠下顶格,中间行子成分等分垂直的距离**

图片 58图片 59

 cssrem安装:cssrem插件可以动态地将px尺寸换算成rem尺寸

  下载本项目,比如:git clone
https://github.com/flashlizi/cssrem 进入packages目录:Sublime
 Text-》Preferences-》Browse  Packages
 复制下载的cssrem目录到刚刚的packages目录里。重启Sublime  Text。

  配置参数  参数配置文件:Sublime
 Text-》Preferences-》Package  Settings-》cssrem 里面有个px_to_rem
(意思是px转rem的单位比例,默许为40)。max_rem_fraction_length(px转rem的小数部分最大的尺寸。默许为6)。availiable_file_types
启用此插件的文件类型。默许为:[“.css”,”.less”,”sass”,”.html”]。

图片 60

2、条目属性

  同时安装flex-grow和flex-shrink以及flex-basis
如:flex:none | <‘flex-grow’
><‘flex-shrink’>’?||<‘flex-basis’>

  表示当父成分又多余的空间时,那一个空间在不相同子成分质检的分配比例。flex-grow:number

  当父成分的空中欠缺时,各样子成分的尺寸减少的比重。flex-shrink:number

  用来规定弹性条目标初始主轴尺寸。flex-basis:length|precentage|auto|content

  覆写父成分指定的对齐方式。align-self:auto |
flex-start | flex-end |center|baseline|stretch

  改变条目在容器中的现身顺序。order:integer

c、弹性盒模型布局

1、容器属性 display:flex  评释使用弹性盒布局(全部都是在父元素上设置)

采取display:flex相对于把子成分变为行内块成分,并且之间不会发生间隙。

图片 61图片 62图片 63图片 64

  确定子成分排列的大势: flex-direction:row
| row-reverse|column|column-reserve

  a、 flex-direction:row 默许子成分水平靠左排列

图片 65图片 66

 b、 flex-direction:row-reverse
 子成分靠右倒序排列,类似于右浮动

图片 67图片 68

 c、 flex-direction:column; 竖排

 图片 69图片 70

 d、 flex-direction:column-reverse; 倒序竖排

 图片 71图片 72

  成分当先父容器尺寸时是不是换行: flex-wrap:nowrap|wrap|wrap-reverse

  a、flex-wrap:nowrap;
子成分宽度领先父级宽度时,默许不换行  

图片 73图片 74

b、flex-wrap:wrap;
子成分宽度超越父级宽度时,换行 

 图片 75图片 76

c、flex-wrap:wrap-reserve;
子成分宽度当先父级宽度时,倒序换行 

 图片 77图片 78

    同时安装flex-direction |
flex-wrap如:
flex-flow:
flex-direction | flex-wrap  flex-flow:row
 wrap;**

**  子成分的尺码规定今后,用此属性来设置flex-direction定义方向上的分布形式:**

**  justify-content:flex-start
| flex-end | center | space-between | space-around**

**  a、justify-content:flex-start
 全部子成分靠左**

图片 79图片 80

**  b、justify-content:flex-end
 全体子成分靠右**

 图片 81图片 82

**c、justify-content:center
 全部子成分居中**

 图片 83图片 84

**d、justify-content:space-between
 第二个子成分靠左顶格,最终一个子成分靠右顶格,中间子元素均分距离**

 图片 85图片 86

**e、justify-content:space-around
 首个子成分靠左的间隔和终极一个子元素靠右的区间是中等子成分间距的一半,中间的因素等分间距。**

 图片 87图片 88

  子成分的尺码规定今后,用此属性来设置flex-direction定义方向上的垂直方向的遍布格局:align-items:flex-start
| flex-end | center | baseline | stretch

**  a、align-items:flex-start
 全部垂直靠上排列**

**图片 89图片 90**

**b、align-items:flex-end
 全体垂直靠下排列**

 图片 91图片 92

**c、align-items:center
 全体子元素垂直居中(也得以应用margin或padding或定点来落实)**

 图片 93图片 94

**d、align-items:baseline
 子元素内的文字底部对齐,就算文字大小差距,会招致子成分尾部不对齐**

 图片 95图片 96

ealign-items:stretch
 如若子成分不安装高度,中度会被拉伸到和父成分高度一样(除去本身的margin)**

图片 97图片 98

  设置多行子成分在行方向上的对齐形式:align-content
: flex-start | flex-end | center | space-between | space-between |
space-around | stretch

a、align-content : flex-start
 多行完全靠上排列**

**图片 99**图片 100**

b、align-content : flex-end
多行完全靠下排列**

**图片 101图片 102**

**c、align-content :center
多行完全居中排列**

**图片 103图片 104**

**d、align-content:space-between
 第一行子元素靠上顶格,最终一行子成分靠下顶格,中间行子成分等分垂直的间距**

图片 105图片 106

2、条目属性

  同时安装flex-grow和flex-shrink以及flex-basis
如:flex:none | <‘flex-grow’
><‘flex-shrink’>’?||<‘flex-basis’>

  代表当父成分又多余的上空时,那一个空中在差异子元素质检的分配比例。flex-grow:number

图片 107图片 108图片 109

  当父成分的空间不足时,各样子元素的尺码收缩的比重。flex-shrink:number

图片 110图片 111

  用来确定弹性条目标上马主轴尺寸。flex-basis:length|precentage|auto|content

  覆写父成分指定的对齐格局。align-self:auto
| flex-start | flex-end |center|baseline|stretch

图片 112图片 113

  改变条目在容器中的出现顺序。order:integer

 图片 114图片 115

运用弹性盒模型做菜单

图片 116

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>弹性盒模型的应用</title>
 6     <link rel="stylesheet" href="../css/reset.css">
 7     <style>
 8         .menu_con{
 9             width:960px;
10             margin:20px auto;
11             display: flex;
12         }
13         .logo{
14             width:80px;
15             height:60px;
16             background:gold;
17         }
18         .menu{
19             background: #c3eaff;
20             flex-grow: 1;
21             display: flex;
22             align-content: space-between;
23             /*使子元素垂直居中*/
24             align-items: center;
25             overflow: hidden;
26         }
27         .menu li{
28             text-align: center;
29             /*每个li均分剩余宽度*/
30             flex-grow: 1;
31             border-left:1px solid #ccc;
32             margin-left:-1px;
33         }
34         /*
35             或者是给父元素加overflow:hidden,同时给子元素设置margin-left为负值来实现边框合并
36             可以使用这种方法来去掉第一个li的左边距
37             .menu li:nth-child(1){
38              border-left: 0;
39             }
40         */
41         menu li a{
42             color:#666;
43         }
44         @media (max-width:960px){
45             .menu_con{
46                 width:100%;
47             }
48         }
49     </style>
50 </head>
51 <body>
52     <div class="menu_con">
53         <div class="logo"></div>
54         <ul class="menu">
55             <li><a href="javascript:void(0);">首页</a></li>
56             <li><a href="javascript:void(0);">新闻动态</a></li>
57             <li><a href="javascript:void(0);">时事热点</a></li>
58             <li><a href="javascript:void(0);">娱乐新闻</a></li>
59             <li><a href="javascript:void(0);">关于我们</a></li>
60         </ul>
61     </div>
62 </body>
63 </html>

 

相关文章