web 移动端开发基础

文章目录

web 移动端开发基础
- 了解视口相关内容
- meta 视口标签
- 掌握二倍图用法
- - 物理像素 & 物理像素比
  - 多倍图
  - 二倍精灵图做法
- 了解移动端常见选择方案
- 掌握移动端常见问题解决方案
- 移动端常见的布局方式
- - 流式布局（百分比布局）
  - flex 布局 - 弹性布局
  - - flex 布局概念
    - flex 布局原理
    - 容器属性（给父元素设置的属性）
  - 项目的属性（容器内子元素设置的）
  - rem 布局
  - - Rem 单位概念
    - 掌握媒体查询制作方法

了解视口相关内容

视口 viewport - 浏览器显示页面内容的屏幕区域。视口可以分为布局视口，视觉视口，理想视口

layout viewport （布局视口）
- 一般移动设备的浏览器默认设置一个布局视口，用于解决早起 PC 页面在手机显示问题
- IOS，Android 基本都将这个视口的分辨率设置为 980px，所以 PC 上的页面大多数都在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面
visual viewport （视觉视口）
- 用户正在看到 页面区域
- 可以通过缩放操作视觉视口，不影响布局视口，布局视口任保持原来的宽度
ideal viewport （理想视口）
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口，对设备来讲，是最理想的视口尺寸
- 需要手动添加 <meta> 视口标签通知浏览器操作
- <meta> 视口标签的主要目的： 布局视口的宽度应该与理想视口的宽度一致 (设备宽度等于布局宽度)

meta 视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

属性	解释说明
width	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

掌握二倍图用法

物理像素 & 物理像素比

物理像素点指的是屏幕显示的最小单位，真实存在的，例如：苹果6\7\8 ：750*1334
开发时的 1px 不等于 1个物理像素
PC 端页面， 1px 等价一个物理像素，但移动端不同
一个 px 的能现实的物理像素点的个数，称为 物理像素比或屏幕像素比
Retia (视网膜屏幕) 是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度

Retia 屏显示效果

多倍图

对于一张 50px * 50px 的图片，在手机 Retina 屏中打开，按照物理像素比会放大倍数，从而造成图片模糊
在标准的 viewport 设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍图 因为 iPhone 6\7\8 的影响。但现在还存在3 倍图 4倍图的情况，这个按实际情况调整
背景图片需要注意缩放问题

/* 在 iPhone 8 下设置 */
img {/* 原始图片 100px * 100px */width: 50px;height: 50px;
}
/*使用背景图时候*/
div{background-size: 50px 50px;
}

二倍精灵图做法

在 firework 里面把精灵图等比例缩放为原来的一般
之后根据新的大小测量坐标
background-size 精灵图原来宽度的一般

了解移动端常见选择方案

单独制作移动端页面（主流）
- 通常情况下，网址域名前面加 m（mobile）可以打开移动端页面
- 通过判断设备，如果是移动端设备打开，就跳转到移动端页面
- 需要完成两套代码，维护成本较高
响应式页面兼容移动端（其次）
- PC 和移动端共用一套网站，在不同宽度的屏幕下，样式自动适配
- 通过判断设备屏幕宽度来改变样式，以适应不同终端
- 制作时要考虑不同设备宽度，因此需要花费比较多的精力

掌握移动端常见问题解决方案

浏览器：

移动端浏览器基本以 webkit 内核为主，因此需要考虑 webkit 兼容问题
放心使用H5 标签和 CSS3 样式
浏览器的私有前缀只需要考虑添加 -webkit- 即可

css 初始化 normalize

移动端 css 初始化推荐使用 normalize.css

normalize 的优点：保护了有价值的默认值，修复浏览器 bug ，模块化的，拥有详细的文档。
normalize 官方网站

特殊样式的设置

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a {
-webkit-touch-callout: none;
}

移动端常见的布局方式

单独制作移动端页面(主流)

流式布局（百分比布局）
flex 弹性布局（推荐使用）
less + rem + 媒体查询布局
混合布局

响应式页面兼容移动端(其次)

媒体查询
bootstrap

流式布局（百分比布局）

流式布局，就是百分比布局，也称为 非固定像素布局
通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行收缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动 web 开发使用比较常见的布局方式

注意事项

制作过程中，需要定义页面的最大和最小支持的宽度。
max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

flex 布局 - 弹性布局

flex 布局概念

flex 是flexble box 的缩写，用来为盒状模型提高最大的灵活性，任何一个容器都可以指定为 flex 布局
当父盒子设定为 flex 容器后，子元素的 float，clear， vertical-align 属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
容器默认存在两根轴：水平的主轴（main axis）和垂直的 交叉轴（cross axis）
主轴的开始位置（与边框的交叉点）叫做 main start
结束位置叫做 main end；交叉轴的开始位置叫做cross start
结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex 布局原理

采用 flex 布局的元素，称为 Flex 容器 （flex container）,简称容器
容器内的子元素自动称为容器成员，称为 Flex 项目（flex item）,简称项目
设置父元素的 display 属性为 flex，来控制盒子的位置和排列方式

容器属性（给父元素设置的属性）

属性名	概念
flex-direction	决定主轴的方向（即项目的排列方向）
flex-wrap	设置子元素是否换行，默认在一行内显示
justify-content	设置主轴上的子元素排列方式
align-items	设置交叉轴子元素的排列方式（单行）
align-content	设置交叉轴子元素的排列方式（多行）
flex-flow	复合属性，同时设置 flex-direction 和 flex-wrap

项目的属性（容器内子元素设置的）

属性名	概念
order	定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink	定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis	定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex	flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

Flex 布局语法教程 - 详细内容

rem 布局

思考：

页面布局文字能否随着屏幕大小变化而变化？
流式布局和 flex 布局主要针对宽度布局，那高度如何设置自适应变化？
怎么样让屏幕尺寸改变时页面的高度和宽度等比缩放？

Rem 单位概念

rem （root em）是一个相对单位，类似 em ，em 是父元素字体大小
不同的是 em 的参考页面根元素（html）的字体大小
列如： html 设置 font-size:12px; 非根元素设置 width：2rem; 转换 px 表示就是 24px
rem 的优势：父元素文字大小可能不一致，但整个页面只有 html 元素，可以很好的控制整个页面元素大小比例

html { font-size: 12px; }/* 此刻 div 字体大小就是 24px */
div { font-size: 2rem; }

掌握媒体查询制作方法

媒体查询

媒体查询（Media Query）是 css3 新增语法

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
浏览器屏幕宽度发生变化时，页面尺寸跟随变化
目前针对很多 iOS、Android 、平板灯设备都用得到媒体查询

语法规范

@media mediatype and | not | only (media feature) {/*  ...css-code*/
}

mediatype 媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板，手机等

关键字

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

关键字	解释说明
and	可以将多个媒体特性连接到一起，相当于“且”的意思
not	排除某个媒体类型，相当于“非”的意思，可以省略
or	测试多个媒体查询的条件，只要有一个条件成立，则执行，“或”的意思
only	指定某个特定的媒体类型，可以省略

媒体特性

值	解释说明
width	定义输出设备页面中可见区域的宽度
min-width	定义输出设备页面最小可见区域宽度
max-width	定义输出输出设备页面最大可见区域的宽度

@media screen and (min-width: 800px) {
/* 在屏幕设备中，判断屏幕尺寸大于等于800px的时候，最小宽度是 800px*/
}
@media screen and (max-width: 600px) {/* 屏幕最大宽度为600px 时 生效*/
}@media screen and (min-width: 540px) and (max-width: 969px) {
/*屏幕大于等于540px 并且 小于等于 969px 时*/
}

媒体查询引入资源

使用 link 标签判断设备尺寸, 引入不同的 css 文件

<link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">

媒体查询 + rem 实现元素动态大小变化

web 移动端开发基础相关推荐

一、服务端开发基础（搭建Web服务器、网络基础概念、请求响应流程、配置Apache、静态网站与动态网站）
一.建立你的第一个网站(目标) 前端开发最终还是属于 Web 开发中的一个分支,想要成为一名合格的前端开发人员,就必须要充分理解Web 的概念. 构建一个专业的网站是一项巨大的工作!对于新手我们 ...
服务端开发基础知识点
服务端开发服务端基础软件结构 C/S体系结构客户端/服务端,例如QQ.网盘优点:交互性好,对服务器压力小,安全缺点:服务器更新时需要同步更新客户端 B/S体系结构浏览器/服务端,例如网站 ...
对web移动端开发的一些了解
最近,由于老板交待下去要准备开发一些移动端页面出来,作为一个工作以来都是以开发后台管理系统为主的web前端开发人员,我对移动端开发的了解并不多,对于移动端响应式布局,听过的一些技巧:使用rem代替px ...
第一章 Web应用程序开发基础
一.HTTP协议工作机制 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它是一种主流B/S架构中应用的通信 ...
Web全栈开发基础（小白入门版本）
博客传送门近几个月认真写了写Web全栈代码,有点小收获这里分享一下.我还做了个PPT,资源路径欢迎拍砖指点! Web全栈开发是一个听起来很虎的名词.本文从技术层面解释全栈开发,能帮助没有全栈概念, ...
2020年史上最全移动端Web整理从开发基础到实战(三)
一.touch事件的缺陷我们在上面<页面分类>的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时. 但是呢,touch 事件 ...
2020年史上最全移动端Web整理从开发基础到实战(四)
1.案例要求利用响应式布局,实现微金所页面结构. 2.不同屏幕尺寸布局整体样式中大屏幕下样式小屏幕下样式超小屏幕(移动端)下样式 3.代码结构 4.页面结构页面结构主要分8大块: 头部块 ...
android string数组转json_移动端开发基础【20】pages.json的配置项pages
uni-app项目是通过pages节点配置应用由哪些页面组成,pages节点接收一个数组,数组每个项都是一个对象,其属性值如下:(1) 属性:path类型:String描述:配置页面路径(2) 属性: ...
web服务端开发|第一堂课
文章目录第一堂课0917 一.入门知识讲解二.安装IDEA开发工具.配置环境并运行Hello World案例 (一)注册账号 (二)下载安装IDEA (三)下载并安装jdk (四)配置下载hell ...

web 移动端开发基础

web 移动端开发基础

文章目录

了解视口相关内容

meta 视口标签

掌握二倍图用法

物理像素 & 物理像素比

多倍图

二倍精灵图做法

了解移动端常见选择方案

掌握移动端常见问题解决方案

移动端常见的布局方式

流式布局（百分比布局）

flex 布局 - 弹性布局

flex 布局概念

flex 布局原理

容器属性（给父元素设置的属性）

项目的属性（容器内子元素设置的）

rem 布局

Rem 单位概念

掌握媒体查询制作方法

web 移动端开发基础相关推荐

最新文章

热门文章

web 移动端开发基础

web 移动端开发基础

文章目录

了解视口相关内容

meta 视口标签

掌握二倍图用法

物理像素 & 物理像素比

多倍图

二倍精灵图做法

了解移动端常见选择方案

掌握移动端常见问题解决方案

移动端常见的布局方式

流式布局（百分比布局）

flex 布局 - 弹性布局

flex 布局概念

flex 布局原理

容器属性（给父元素设置的属性）

项目的属性 （容器内子元素设置的）

rem 布局

Rem 单位概念

掌握 媒体查询制作方法

web 移动端开发基础相关推荐

最新文章

热门文章

项目的属性（容器内子元素设置的）

掌握媒体查询制作方法