码迷,mamicode.com
首页 > 其他好文 > 详细

星哥自述

时间:2017-08-13 12:36:03      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:不能   title   屏幕   半透明   缩放   简写   content   xxxxxx   一句话   

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{
background-color:yellow;
font-size:60px;

}

@media screen and (max-width:800px){

body{
background-color:blue;
font-size:30px;
} }
@media only screen and (max-width:500px){
body{
background-color:red;
font-size:16px;
}}
@import url("css/02-响应式布局9,.css") all and (max-width:800px);

简单的变化图!!!

 

  


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">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
</body>

 

 效果图:

 

技术分享

 

 

 
 

 这个星期小编还做了京东官网跟星巴克,可谓收获满满,就不上图了,喜欢的给小编点赞哦,不喜欢的轻点喷哦!

 

 技术分享 感谢阅读,“”肾“”苦了,送你一杯星巴克!

 

星哥自述

标签:不能   title   屏幕   半透明   缩放   简写   content   xxxxxx   一句话   

原文地址:http://www.cnblogs.com/scd903686521/p/7352790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!