Java教程

移动端布局

本文主要是介绍移动端布局,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

  • 移动端布局
    • 移动端基础
      • 移动端浏览器现状
      • 移动端屏幕现状
      • 移动端调试方法
    • 视口
      • 布局视口 layout viewport
      • 视觉视口 visual viewport
      • 理想视口 ideal viewport
      • meta视口标签
    • 二倍图
      • 物理像素和物理像素比
      • lRetina(视网膜屏幕)与多倍图
    • 移动开发选择和技术解决方案
      • 移动端开发选择
      • 移动端技术解决方案
    • 常用移动端页面布局
      • 常用布局
      • 流式布局
      • flex布局
        • 什么是flex布局
        • 父项常见属性
          • flex-direction
          • justify-content
          • flex-wrap
          • align-items
          • align-content
          • flex-flow
        • 子项常见属性
          • flex属性
          • align-self
          • order
    • rem布局
      • rem单位
      • 媒体查询
        • 什么是媒体查询
      • 媒体查询语法规范
        • mediatype
        • 关键字
        • 媒体特性
        • 媒体查询书写规范
        • rem适配方案
          • 两种适配方案
    • 响应式布局
      • 响应式布局开发原理
      • 响应式布局容器
      • 响应式布局容器

移动端布局

移动端基础

移动端浏览器现状

移动端起步较晚,基本以webkit为主,兼容移动端主流浏览器,处理Webkit内核即可,可以放心使用H5标签和CSS3样式

移动端屏幕现状

  1. 屏幕尺寸多样、分辨率多样,碎片化严重
  2. 作为开发者无需过多关注分辨率,因为我们使用的尺寸单位是px

移动端调试方法

  1. Chrome DevTools的模拟移动端调试
  2. 搭建本地web服务其,手机和服务器在一个局域网内,通过手机访问服务器
  3. 使用外网服务器,直接IP或域名访问

视口

视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

布局视口 layout viewport

布局视口是指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度。,布局视口的默认宽度有可能是768px、980px或1024px等,这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置,是为了解决早期的PC端页面在手机上显示的问题。

布局视口

视觉视口 visual viewport

视觉视口是指用户正在看到的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度。当我们在手机中缩放网页的时候,操作的是视觉视口,而布局视口仍然保持原来的宽度

视觉视口

理想视口 ideal viewport

理想视口是指对设备来讲最理想的视口尺寸。在理想视口中,布局视口的大小和屏幕宽度是一致的,可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在开发中,为了实现理想视口,需要给移动端页面添加标签配置视口,通知浏览器来进行处理,使得布局视口的宽度与理想视口的宽度一致

理想视口

meta视口标签

属性说明
widthviewport的宽度,可以设置为device-width特殊值
initial-scale初始缩放比,大于0的数字
maximum-scale最大缩放比,大于0的数字
minimum-scale最小缩放比,大于0的数字
user-scalable用户是否可缩放,yes or no,1 or 0
// 以下为最标准的viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

二倍图

物理像素和物理像素比

  1. 物理像素指的是屏幕显示的最小颗粒,是物理真实存在的(分辨率)。做开发时候的1px 不一定等于1个物理像素

  2. 物理像素比即1个px的能显示的物理像素点的个数

物理像素比

lRetina(视网膜屏幕)与多倍图

  1. lRetina:一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊

  2. **解决方案:**在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题

  3. 背景缩放background-size:该属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;
单位:长度、百分比、cover、contain
  • cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域(高度宽度等比拉伸,覆盖完全覆盖区域)
  • contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域(高度、宽度等比拉伸,可能存在空白区域)

移动开发选择和技术解决方案

移动端开发选择

  1. 单独制作移动端页面(主流)
    • 京东商城
    • 淘宝
    • 苏宁易购
  2. 响应式页面兼容移动端:即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配,制作麻烦需要话费大量尽力调兼容性问题
    • 三星手机官网

移动端技术解决方案

  1. 兼容性问题:只需考虑webkit兼容性问题,可以大胆使用H5和CSS3样式,浏览器的私有前缀我们只需要考虑添加 webkit 即可

  2. 移动端公共样式:移动端CSS 初始化推荐使用 normalize.css

    • 保护了有价值的默认值
    • 修复了浏览器的bug
    • 是模块化的
    • 拥有详细的文档
  3. CSS3盒子模型 box-sizing

    • 传统模式宽度计算:盒子的宽度 = CSS中设置的width + border +padding
    • CSS3盒子模型:盒子的宽度= CSS中设置的宽度width里面包含了borderpadding
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
  1. 移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除背景,设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

常用移动端页面布局

常用布局

  1. 移动端单独制作页面
    • 流式布局(百分比布局)
    • flex弹性布局(推荐
    • less + rem + 媒体查询布局
    • 混合布局
  2. 响应式页面布局
    • 媒体查询
    • bootstrap

流式布局

流式布局就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

**案例:**京东移动端首页

flex布局

什么是flex布局

即flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局,又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 。当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。采用 Flex 布局的元素,称为Flex 容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flexitem),简称“项目

父项常见属性

属性说明
flex-direction设置主轴方向
justify-content设置主轴上的子元素排列方式
flex-wrap设置子元素是否换行
align-content设置侧轴上的子元素的排列方式(多行)
align-items设置侧轴上的子元素排列方式(单行)
flex-flow复合属性,相当于同时设置了 flex-direction 和 flex-wrap
flex-direction

在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有 : 行和列、x 轴和y 轴,默认主轴方向就是 x 轴方向,水平向右,默认侧轴方向就是 y 轴方向,水平向下

属性值说明
row默认值,从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
justify-content

设置元素主轴排列方式

属性值说明
flex-start默认值,从头部开始排列
flex-end从尾部开始排列
center在主轴居中对齐
space-around平分剩余空间,每个盒子margin-leftmargin-right相等
space-between先两边贴边,再平分剩余空间
flex-wrap

设置是否换行

属性值描述
nowrap默认值,不换行,装不下会缩小子元素宽度放到父盒子中
wrap换行
align-items

设置侧轴子元素排列方式(单行

属性值描述
flex-start默认值,从头部开始
flex-end从尾部开始
center居中显示
stretch拉伸,不能有高度/宽度
align-content

设置侧轴子元素排列方式,并且只能用于出现换行的情况(多行),在单行下是无效的

属性值描述
flex-start默认值,从侧轴头部开始排列
flex-end从侧轴尾部开始
center再侧轴居中显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴两头先贴边,再平分剩余空间
stretch设置子项元素高度平分父元素高度

align-content 和align-items区别:

  • align-items适用于单行情况下, 只有上对齐、下对齐、居中和拉伸
  • align-content适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
  • 总结:单行找align-items,多行找align-content
flex-flow
/* flex-direction 和 flex-wrap 属性的复合属性 */
flex-flow:row wrap;

子项常见属性

属性描述
flex子项占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序(前后顺序)
flex属性

分配剩余空间

/* flex 属性定义子项目分配剩余空间,用flex来表示占多少份数 */
.item {
    flex: 2; /* 默认值 0 */
}
align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}
order

数值越小,排列越靠前,默认为0,注意不是z-index

.item {
    order: 2;
}

rem布局

rem单位

rem即root em,是一个相对单位,类似于em,em是父元素字体大小,不同的是rem的基准是根元素——html元素的字体大小。比如根元素(html)设置font-size=12px;非根元素设置width: 2rem; 则换成px表示就是24px。使用rem可以很好来控制整个页面的元素大小

媒体查询

什么是媒体查询

媒体查询(Media Query)是CSS3新语法。

  • 使用 @media查询,可以针对不同的媒体类型定义不同的样式
  • @media 可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

媒体查询语法规范

  • 用 @media开头 注意@符号
  • mediatype 媒体类型
  • 关键字 and not only
  • media feature 媒体特性必须有小括号包含
@media mediatype and|not|only (media feature) {
	/* CSS-Code; */
}

mediatype

将不同的终端设备划分成不同的类型,称为媒体类型

描述
all用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕、平板电脑、智能手机等

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

描述
and可以将多个媒体特性连接到一起,相当于“且”的意思
not排除某个媒体类型,相当于“非”的意思,可以省略
all指定某个特定的媒体类型,可以省略

媒体特性

每种媒体类型都具体各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意它们要加小括号包含

描述
width定义输出设备中页面可见区域的宽度
min-width定义输出设备中页面最小可见区域宽度
max-width定义输出设备中页面最大可见区域宽度
/* 在屏幕上 并且 最大宽度是800px(宽度小于等于800) 时body为粉色,注意时包含800px的 */
@media screen and (max-width: 800px) {
    body {
        background-color: pink;
	}
}
/* 查询时先会执行上面的,下面的这句话会覆盖它 */
/* 在屏幕上 并且 最大宽度是500px(宽度小于500) 时body为蓝色 */
@media screen and (max-width: 500px) {
	body {
        background-color: blue;
	}
}

媒体查询书写规范

为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,我们通常从小到大来写,这样代码更简洁

rem适配方案

让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。

两种适配方案
  1. less + rem + 媒体查询

    ①假设设计稿是750px

    ②假设我们把整个屏幕划分为15等份(划分标准不一可以是20份也可以是10等份)

    每一份作为html字体大小,这里就是50px

    ④那么在320px设备的时候,字体大小为320/15就是 21.33px

    ⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

    ⑥比如我们以750为标准设计稿

    ⑦一个100像素的页面元素在 750屏幕下,就是 100/ 50 转换为rem是2rem*2rem,高宽比例是1比1

    ⑧320屏幕下,html字体大小为21.33,则 2rem= 42.66px 此时宽和高都是 42.66px,但是宽和高的比例还是 1比1

    ⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果

    总结:

    ①最后的公式:页面元素的rem值 = 页面元素值(px)/ (屏幕宽度 / 划分的份数)

    ②屏幕宽度/划分的份数就是 html元素font-size的大小

    ③或者:页面元素的rem值 = 页面元素值(px) / html元素font-size字体大小

  2. flexible.js

    ①手机淘宝团队出的简洁高效 移动端适配库,因为里面js做了处理,无需再写各种媒体查询条件,它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。

    ②我们只需确定好当前设备的html元素文字大小就可以了,剩余的,让flexible.js来去算

    比如当前设计稿是 750px, 那么我们只需要把 html元素文字大小设置为75px(750px / 10)就可以了,

    里面页面元素rem值: 页面元素的px 值 / 75

    github地址:https://github.com/amfe/lib-flexible

    总结:

    因为flexible是默认将屏幕分为10等分,但是当屏幕大于750的时候希望不要再去重置html元素字体了

    所以要自己通过媒体查询设置一下,并且要把权重提到最高

响应式布局

响应式布局开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备划分情况如下:

  • 小于768的为超小屏幕(手机)
  • 768~992之间的为小屏设备(平板)
  • 992~1200的中等屏幕(桌面显示器)
  • 大于1200的宽屏设备(大桌面显示器)

响应式布局容器

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。父容器版心的尺寸划分如下:

  • 超小屏幕(手机,小于 768px):设置宽度为 100%
  • 小屏幕(平板,大于等于 768px):设置宽度为 750px
  • 中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
  • 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px

也可以根据实际情况需要自定义划分
布局和样式的设置,从而适配不同设备的目的。设备划分情况如下:

  • 小于768的为超小屏幕(手机)
  • 768~992之间的为小屏设备(平板)
  • 992~1200的中等屏幕(桌面显示器)
  • 大于1200的宽屏设备(大桌面显示器)

响应式布局容器

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。父容器版心的尺寸划分如下:

  • 超小屏幕(手机,小于 768px):设置宽度为 100%
  • 小屏幕(平板,大于等于 768px):设置宽度为 750px
  • 中等屏幕(桌面显示器,大于等于 992px):宽度设置为 970px
  • 大屏幕(大桌面显示器,大于等于 1200px):宽度设置为 1170px

也可以根据实际情况需要自定义划分

这篇关于移动端布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!