上一章,我们讲到移动端的viewport方法,主要是适配不同的屏幕的像素密度的手机设备。为了让我们的前端的UI设计的页面完全展示出来,来进行webapp的页面设计。viewport方法有很多属性,比如说,width=device-width,maximum-scale=10,initial-scale=1,minimum-scale=1,user-scale=no 我们在移动端的设配就是一般的写法,能适配不同的手机屏幕的像素密度的。这样,我们的html和css架构就不会失真。这是移动端的适配。当然,我们还有响应式布局,为了让客户体验更好的效果,让页面的结构能适应不同的屏幕宽度呈现不同的页面样式。主要的语法是@media screen and(max-width){} 在小括号内,是我们的判断的屏幕的宽度呈现的不同的css样式。在大括号的内,我们写以元素的选择器来进行设置css样式。当然,我们如果写多个css样式,可以用link标签来进行导入。写不同的css样式表,来设置不同的css样式适应不同的屏幕的宽度。写法如下:<link rel="stylesheet" type="text/css" href ="link.css" meta =" only screen and(max-width:300px)"
我们来讲一下的是移动端的flex布局。
如果,我们为移动端定制一套的html架构的话,我们是首选的是flex布局手段。也是将来的布局的发展趋势。
flex是弹性布局方式。是关注的页面的元素的分配空间和对齐方式,是以缩放的比例来进行布局的,正好可以适应不同的屏幕大小来进行适配。具体的布局方式:
在父集的盒子上,我们通过改变类型:display:flex来进行弹性布局。其实,flex布局的基本原理是父集的弹性flex来控制子集项目,而在盒模型是在各自的元素进行控制。
布局的核心的是以主轴来进行布局,也就是说,项目的布局和占位是以主轴的方向来进行布局的,所以,我们首先是要按照主轴的方向来进行布局,就是用flex-direction=row/colum/reverse 来进行控制主轴的方向,也是相对应的控制交叉轴的方向。在不换行的情况下,是单根主轴的情况下,换行的属性是(flex-wrap:wrap)来设置换行的。在换行情况下,是多根主轴和交叉轴。我们在设置多根主轴和交叉轴时,我们用align-content:center/bottom/between来进行设置多根主轴和交叉轴的情况下,我们用align-content的属性来控制交叉轴的对齐方向。(注意:我们有改变主轴的方向,没有改变交叉轴的方向的属性。因为我们改变了主轴的方向(注意:交叉轴的方向是随着主轴的方向而改变的。所以,我们也不用设置交叉轴的方向了),也就间接的改变交叉轴的方向了。但是我们有改变的交叉轴的对齐方式的属性。(注意:我们要根据主轴和交叉轴的数量来进行设置或者使用align-content或者是align-items))
在主轴和交叉轴的对齐方式上,我们要经常用到这两个属性:space-between或者是space-around .space-between是在两端对齐。通过父集来控制项目两端对齐。是项目之间的间隔相等。space-around:是可以控制的项目的之间的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。因为这是每个项目的间隔是相等的,中间的间隔是两个项目的间隔之和。所以,是2倍的间隔。
我们在移动端的布局时,要分析结构,是否要用弹性盒模型布局。如果是上下结构,我们要改变主轴的方向,要分析项目之间的间隔是否要用到space-between或者space-around的属性。要注意的是,如果用到弹性盒模型布局的时候,浮动(float),clear,verict-align将会失效。如果,在不设置高度的时候,默认值stretch的属性会把整个空间充满,也就是顶天立地,那么,我们会用到项目的一些属性。前面,我们讲到的是容器的属性。
dispaly:flex;
flex-wrap:wrap;
justify-content:center/flex-end/flex-start/ space-around/space-between/
align-items/align-around/stretch
这些属性是我们的容器属性,经常用到的。也是写在容器的属性来控制子集的属性。
昨天,在做项目的时候,我们用