App下载
章节 问答 笔记 资料

1. 移动 Web 开发入门
WebApp开发和小程序基础入门 / 1. 移动 Web 开发入门

WebApp开发和小程序基础入门

第1章 移动 Web 开发入门
第2章 Bootstrap 起步
第11章 开发环境与测试
第13章 微信小程序安装及目录讲解
1/3
课程视频:移动 Web 开发入门

概念

移动 Web 开发简单的说就是将网页更好的显示在移动端的一些设置:

  1. 流式布局。

  • 即百分比自适应布局或非固定像素布局。

  • 通过将盒子的宽度设置成百分比参照屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充。

  1. viewport 视口:

  • 视口的缩放配置。目的是为了让 CSS 样式中的逻辑像素匹配到手机终端的物理像素,从而达到让网页视图匹配手机屏幕的效果。

  • rem 单位的使用。目的是为了我们只需要一套代码就可以适应大部分不同屏幕的手机。

以上两点虽然实现的目的不同,但实现的方法原理基本一致。

  1. 自适应布局:实现在不同屏幕分辨率的终端上展示匹配分辨率的页面,也就是说一个页面能够兼容多个终端。

  1. 响应式布局:一般根据屏幕尺寸划分为手机、平板和电脑。页面能根据三者的分辨率界线,展示匹配不同终端的不同页面,它需要不同的 CSS 布局样式来适应不同的终端。

基础准备

在正式开始本教程的学习前,您需要掌握一些前端基础知识:

提升准备

必备知识点:

  • Adobe PhotoShop

以上是本小节的主要知识点。

+10 经验 +10积分
解析
提示
参考答案
+10 经验 +10积分
参考答案
视频播放结束,是否学习下一节?
问答专区
笔记
“好记性不如烂笔头~”
课程辅助材料