移动Web 第03天:移动端的特点

199 阅读5分钟

一、移动端特点

移动端和PC端网页的异同点:

异:

  • 开发pc端难度 > 移动端难度
  • PC屏幕大,网页固定版心,手机屏幕小, 网页宽度多数为100%,不写版心
  • 移动端没有hover的使用【悬停时的状态】,一般是触碰就是点击状态
  • PC端可以通过ctrl+来缩放屏幕的大小,而移动端不支持

同:都是采用html css js 等编写

ipad端不包含在移动端内,一般是采用pc端

用 谷歌模拟器 在电脑里面边写代码边【调试移动端网页效果】

  • JS会自动检测用户屏幕的设备大小,当模拟移动端时,点刷新,有些网站会将目前的pc端网页改为移动端网页 【并不是所有网站都有移动端 】

移动端的调试宽度:【模拟屏幕实际宽度】 宽度范围:320~750

屏幕尺寸的不同表述方式:

  • 消费者,屏幕的对角线
  • 程序员:用px来表述屏幕的宽x高 【逻辑分辨率,物理尺寸】,开发中,只看逻辑分辨率【屏幕的实际大小】,不看物理分辨率

二、什么是分辨率?

分辨率分为:

  • ①物理分辨率:【设备分辨率】厂商制作,指视网膜所形成的清晰、细腻画面
  • ②逻辑分辨率:物理尺寸大小
  • 小tips:

image.png

视口 viewport [浏览器的可视窗口]

使用meta标签设置【视口宽度】,使得模拟更能适配不同设备宽度的网页

  • 让网页宽度html等于移动端的设备宽度(分辨率)【手机屏幕尺寸都不同, 网页宽度为100%时,网页的宽度和逻辑分辨率尺寸相同。
  • 如果不设置,模拟移动时,不管怎么设置屏幕尺寸,网页移动端始终默认 980px,后面几个属性是为了更好的兼容
<meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

image.png

pc端的网页 html宽度会随着屏幕尺寸变化而变化【网页的缩放】

三、二倍图

  • ①小图放大,会失真, 大图放小,不会失真
  • ②大部分:物理分辨率:逻辑分辨率= 2:1
  • ③会使用像素大厨软件测量二倍图中元素的尺寸 【1倍图 PC端 2倍图 移动端】

四、百分比布局(流式布局)

  • 指盒子宽度的百分比,可以根据屏幕大小自行缩放,盒子的高度自己设定(固定)

五、Flex布局

与浮动布局的区别:

浮动:

  • ①可以让块级元素同一行显示,盒子间的间距可以用margin设置。
  • ②在父元素没有设置高度时,由子元素撑高,但浮动的代码元素无法撑开父元素高度,导读父元素的高度为0,从而父元素需要设置 overflow: hidden;
  • ③浮动的元素会脱离标准流
  • ④一般是左浮动,右浮动,对于有边距要求的,在慢慢调整,很不方便

Flex布局的特点:

  • ①相比于浮动,更方便设置同一行不同元素的排列,是一种浏览器提倡的布局模型
  • ②布局网页更简单、灵活
  • ③避免浮动脱标的问题
  • ④子元素内的间隙:【调节主轴或侧轴的对齐方式来设置盒子之间的间距+外边距】
  • ⑤是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
给父元素添加 display: flex,使得盒子内的子元素可以自动的挤压或拉伸,此时父元素称为【弹性容器】
  • span 给设置了宽高,无任何反应

image.png

当父元素设置了弹性盒子模型后,所有的子元素

    1. 会在强制一行上显示
    1. 子元素可以自由的设置宽度和高度【即使是行内元素】
    1. 子元素默认宽度 由内容撑开 【当没有设置宽度时】
    1. 子元素默认高度和父元素等高【当没有设置高度时】

image.png

image.png

image.png

主轴对齐方式:justify-content 简称 jc

①justify-content:flex-start 默认值 子元素从左到右排列

修改主轴对齐方式属性: justify-content
  • ②justify-content:flex-end 子元素从终点开始依次排列
  • ③justify-content:center 沿主轴居中排列
  • ④justify-content:space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
  • ⑤justify-content:space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
  • ⑥justify-content:space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

侧轴对齐方式: align-items调节元素在侧轴的对齐方式 简称 ai

修改侧轴对齐方式属性: align-items(添加到弹性容器)父元素

  • ① align-items :stretch 默认值, 弹性子盒子沿着主轴线被拉伸至铺满容器【子元素当不设置高度时,与父元素等高】
  • ② align-items :flex-start 默认值, 起点开始依次排列 【顶线】
  • ③ align-items :flex-end 终点开始依次排列 【底线】
  • ④ align-items :center 沿侧轴居中排列 【中线】
align-self: 单独控制某个弹性子元素在侧轴的对齐方式(添加到子元素)

弹性盒子【由弹性容器(Flex container)和弹性子元素(Flex item)】组成

  • 弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器。
  • 弹性容器内包含了一个或多个弹性子元素。
  • 注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
  • 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

六、伸缩比,使用flex属性修改弹性盒子伸缩比

  • ①先给父元素 :display: flex;
  • ②给弹性子盒子添加 flex : 值(整数)
  • ③flex:值,不管值是多少,始终是瓜分1行的宽度

image.png

单行、多行如何书写省略号

image.png