移动端
Posted xiaotaiyangye
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端相关的知识,希望对你有一定的参考价值。
移动布局:
1,移动设备 手机和ipad
安卓系统ios系统
安卓系统 内置浏览器是谷歌,iOS内置safari浏览器,他们的内核都是webkit,不考虑兼容性,需要考虑的是安卓和iOS的区别
2,布局
设备宽度···设备的实际大小,设备的分辨率···厂家给的
页面的大小···设计稿上的大小
浏览器的视口···浏览器自带的 通过document.documentElement.clientwidth 查看在移动设备上如果不做处理一般默认980
例子----
设备宽320 ,页面的宽1200 ,浏览器的视口980px 三种不统一,我们用移动端看页面,浏览器的视口会自动缩小,以100%完整展示页面,就会变得模糊不清,特别挤
我们需要把这三个变得统一:
1,移动设备宽(320)和浏览器视口宽(980)变得一致
在head之间加一个meta标签name=‘viewport’
设备宽度和浏览器视口一致时,如果页面宽大于这个数字,就会出现滚动条
var meta=document.createElement(‘meta‘)
meta.name=‘viewport‘;
meta.content=‘width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no‘;
document.head.appendChild(meta)
2,当移动设备和浏览器视口一致时,如果你还用传统开发,如果页面超过设备宽,超过的部分会被截掉
不能用传统的页面开发模式
a)弹性布局
b)流式布局(百分百布局)···相对父级
c)响应式布局
d)rem布局
弹性布局----
1,分两部分---弹性父级,弹性子元素
2,给父级设置display:flex或inline-flex *弹性子元素通常在弹性盒子内一行显示
flex-direction 属性 指定了弹性子元素在父容器中的位置
row:
横向从左到右排列(左对齐),默认的排列方式
row-reverse:
反转横向排列(右对齐,从后往前排,最后一项排在最前面)
column:
纵向排列
column-reverse:
反转纵向排列,从后往前排,最后一项排在最上面
justify-content 属性 内容对齐
flex-start:
弹性项目向行头紧挨着填充
flex-end:
弹性项目向行尾紧挨着填充
center:
弹性项目居中紧挨着填充
space-between:
弹性项目平均分布在该行上
space-around:
弹性项目平均分布在该行上,两边留有一半的空间间隔
align-items 属性 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式
flex-start:
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:
弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:
弹性盒子元素在该行的侧轴(纵轴)上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)
baseline:
如弹性盒子元素的行内轴与侧轴为同一条,则该值与‘flex-start‘等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为‘auto‘,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
flex-wrap 属性 用于指定弹性盒子的子元素换行方式。
nowrap - 默认,
弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。
该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
wrap-reverse -反转 wrap 排列。
以上是关于移动端的主要内容,如果未能解决你的问题,请参考以下文章