1 移动开发的技巧：
[ViewPort基础知识]
设置布局ViewPort的各种信息；
1.width=device-width： 设置ViewPort视口宽度等于设备宽度；
2.initial-scale=1 :网页默认缩放比为1（网页在手持设备上。不会进行默认缩放）
3.minimum-scale=1：网页最小缩放比为1
4.maximum-scale=1：网页最大缩放比为1
5： user-scalable=no：禁止用户手动缩放网页的（ios10以上设备缩放）
在手机站跟响应式网站的制作中，网页必须添加下述ViewPoint的设置语句
2.一大堆前缀知识：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--禁止设备将手机号。邮箱进行识别-->
ios 添加到主屏幕时，WebAPP的标题
<meta name="apple-mobile-web-app-title" content="杰小瑞的APP">
ios添加到主屏幕时候 ，启用WebAPP的全屏模式，删除顶端的地址栏跟底部工具栏
<meta name="apple-mobile-web-app-capable" content="yes" />
ios添加到主屏幕时，WedAPP的顶部状态栏颜色
black：黑色
white:白色
balck-translucent :半透明(当设置为半透明是,网页将充满整个头部,顶部透明的状态栏将盖住网页最上方一小条)
<meta name="apple-mobile-web-app-status-bar-style" content="black">
ios添加到主屏幕时WebAPP的图标
<link rel="apple-touch-icon-precomposed" href="" />
<!--设置浏览器，使用最新的IE或者Chrome去编译
》》》这句设置语句，不是手机端专用，一般PC网页均需要设置。
<meta http-equiv="X-UA-Compatible" content="IE=edge, Chrome=1"/>
3手机端的字体样式：
[手机端字体样式]
1.一般手机端不支持微软雅黑字体。
2 中文字体一般不设置，使用系统默认即可。
3 英文字体一般不设置为font-family:helvetica;
需要注意一下几点：
1
{设置用户不能选取中文}
2
PC端不能用鼠标选择；
去除表单的默认外观
手机 PC均可使用
-webkit-user-select:none;
-moz-user-select:none;
appearance:none;
例如：
1 ：给手机端打电话： <a href="tel://xxxxxx">打电话给。。。。</a>
2：给手机端发短信：<a href="sms://xxxxxx">发短信给.....</a>
2 响应式布局：使用媒体查询的三种方式：
【使用媒体查询的三种方式】
1.直接在css中使用，：
@media 类型（常选all/screen） and (条件1 ）and（条件2)
{css选择器{
css属性：属性值；}
2.使用link链接css，media属性可以设置媒体查询方式：
<link rel="stylesheet" href="css/02-响应式布局.css" media="all and (max-width:800px)"/>
3.使用@import导入，直接在url后面使用空格间隔媒体查询规则：
@import url("css/02-响应式布局.css") all and (max-width:800px);
|
举个栗子： body{ } @media screen and (max-width:800px){ body{ 简单的变化图！！！ |
3弹性布局：
先理解两个概念：
理解两个概念：
容器：需要添加弹性布局的父元素；
项目：弹性布局容器中的每一个子元素，称为项目；
**灰常重要的一句话：
弹性布局的使用，给父容器添加display：flex/inline-fiex；属性。既可使容器内部采用弹性布局显示
而不遵循常规文档流的显示方式
举个简单的例子：一个body里面的简单的div！
|
<div id="div"> <div class="div1"></div> <div class="div2">2</div> <div class="div3">3</div> <div class="div4">4</div> </div> <style type="text/css"> <style> #div{ width:... height.... display:flex; } #div .div1{} #div .div2{} #div .div3{} #div .div4{} /*一个简单的弹性布局*/ </style> |
这是基础哦
容器添加弹性布局后，仅仅是容器内部采用弹性布局，而容器内部自身在文档流中的定位方式依然遵循常规的文档流
display:flex;容器添加弹性布局后，显示为块级元素；
display:inline-fiex;容器添加弹性布局后，显示为行级元素；设置flex布局之后，子元素的float clear 和vertical-align属性将会失效，但是position属性将会继续生效；
4下面介绍各种属性：
作用于容器的相关属性：
flex-direction属性决定主轴的方向（即项目的排列方向）。
row:默认值，主轴为水平方向，起点在左端，
row-reverse:主轴为水平方向，起点在右端，
column ：主轴为垂直方向，主轴在上侧；
column-reverse;主轴为垂直方向，主轴在下侧；
②
flex-wrap:属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
③
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
④
justify-content属性定义了项目在主轴上的对齐方式。
》》》此属性与主轴方向息息相关，主轴方向为row主轴方向在左面，主轴方向为row-reverse起点在右面，column起点在上面
column-reverse起点在下面；
flex-start（默认值）：左对齐 项目位于主轴起点；
flex-end：右对齐 项目位于主轴终点；
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
》》》两端对齐，项目之间的间隔相等（开头和中间的项目，与父容器边缘没有间隔)
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
(开头和中间的项目，与父容器边缘有一定间隔)
⑤
align-items属性定义项目在交叉轴上如何对齐。
flex-start :交叉轴的起点对齐。
flex-end :交叉轴的终点对齐。
center :交叉轴的中点对齐。
baseline :项目的第一行文字的基线对齐。(文字行高，字体大小，会影响每行的基线)
stretcstretchh:(默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
⑥
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（当项目换为多行时，可使用align-content取代align-items） flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
作用于项目上的属性
①
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
举个栗子：
<body>
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
</body>
<style>
#div{
给他添加弹性布局
}
#div .div1{
order:2
}
#div .div2{
order:3
}
#div .div3{
order:1
}
#div .div4{
order:4
}
</style>
我们的排列顺序就是：div3 div1 div2 div4!!就是所谓哥哥让着弟弟！
②
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
》》如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
③
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
>>果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
④
flex-basis属性定义了项目占据的主轴空间，(如果设置后如果主轴为水平，则设置这个属性，相当如设置项目的宽度，，元width将会失效；）
⑤
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
这个属性有两个快捷设置， auto=（1 1 auto）/none=（0 0 auto）
⑥
align-self:定义单个项目在交叉轴的排列方式，可以覆盖掉容器上的align-item属性，
属性值与align-item相同，默认值为auto，表示继承父容器的align-item属性。
举个整个的栗子，属性随机用一个
<style>#div{width:100%;height:600px;background-color:yellow;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;}#div .div1{width:100px;height:100px;background-color:blue;}#div .div2{width:100px;height:100px;background-color:red;}#div .div3{width:100px;height:100px;background-color:pink;}#div .div4{width:100px;height:100px;background-color:green;}</style><body><div id="div">
|
效果图：
这个星期小编还做了京东官网跟星巴克，可谓收获满满，就不上图了，喜欢的给小编点赞哦，不喜欢的轻点喷哦！
感谢阅读，“”肾“”苦了，送你一杯星巴克！