Web前端——移动端页面开发

Web前端笔记

第五部分：移动端页面开发

1. 移动端与PC端页面布局区别

视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，
宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，
这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。
参考：001-移动端和PC端网页渲染区别.png
由于产生按比例缩放，很多文字图片就会缩小不容易观看
因此需要设置视口宽度大小和设备大小一样，这样就不会产生缩放，样式效果和实际显示效果相同

这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，
将视口的大小设置为和移动设备可视区一样的大小。
- 设置方法：快捷方式：meta:vp 然后tab键
...... ...... - width=device-width 表示视口宽度和设备宽度相同 - user-scalable 不允许用户缩放 - 后面3个表示各种尺寸都是1.0,都写上是为了兼容各种浏览器
视网膜屏幕（retina屏幕）清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，
无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，
常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，
它的物理像素点大小是一般屏幕的1/4（1个像素有4个物理像素点）,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。

显示器正常1个物理像素，retina相同的尺寸实际有4个物理像素（4个发光点）
正常图片1个像素对应显示器1个像素，但是retina屏幕也是放在1个像素里面，
但是现在有4个像素点显示一个像素，图像的一个像素就要被拉大显示，实际就会出现模糊效果

图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，
但是由于视网膜屏幕的物理像素点比一般的屏幕小，
图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，
可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。

2. 适配布局类型

PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：响应式布局+流体布局
2、移动端适配：
- 流体布局+少量响应式
- 基于rem的布局

2.1. 流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，
流体布局中，元素的边线无法用百分比，
可以使用样式中的计算函数calc()来设置宽度，
或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
流体布局方式1：
有bug不推荐，盒子的屏幕占比减去边框就是实际宽度
calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
流体布局方式2(推荐使用)：
box-sizing:
1、content-box
默认的盒子尺寸计算方式
(盒子尺寸默认值是内容宽度加padding加边框宽度，但是设置的宽度只是内容的宽度)
2、border-box
置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
(盒子实际尺寸默认是不包含边框的里面的内容，现在改为从边框开始计算盒子的尺寸)

2.2. 响应式布局

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，
不同的宽度应用不同的样式块，
每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。
响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

针对不同的屏幕宽度设置不同的样式宽度(配合响应式布局一起使用)

相应布局的伪代码如下：参考006实例

2.3. 基于rem的布局

首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，
rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，
其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，
改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
html设置的字体大小就是1rem
我们只需要改变html的字体大小，所有的页面字体都会一起变大或变小
根元素指定一个更容易计算的font-size，
根据经验，一般将其设置为html的font-size：62.5%
（浏览器的默认字体大小为16px，10px = 16px * 62.5%）。
也可以指定font-size为10px，即1rem=10px
这样一来，想要完成px到rem的转换，只要将px的值除以10即可。
CSS3中的rem单位参考以下博客:
https://blog.csdn.net/H_O_L_Y/article/details/51852954
参考实例007和008
流体式布局和rem布局区别：
- 参考web_fluid和web_rem实例
- 都打开index，然后切换到手机，iPhone6设备，可以左右拉动宽口或者切换设备，对比效果
- 流体式布局，字体图片都不会改变大小（因为样式里面给的都是固定像素），用百分比设置的背景盒子(一般只设置宽度，高度不设置)也只会拉宽
- rem布局，背景栏目，字体图片都会等比例放大缩小，虽然设置时候，样式里面是以iPhone6大小为基准设置样式
- js里面设置的iPhone6屏幕尺寸下的默认html字体是10px
- 切换设备或者拉伸窗口大小，默认字体10px会自动缩放，对应后面的样式全部是rem，以html字体作为基准
- 因此所有样式都会自动按比例缩放，我们不断拉宽，可以发现html字体最大只能是20px，图片就只能放达到原始2倍（是否就是背景图2倍有关）
- 菜单栏图标放大到2倍（图片原始大小）就不在放大了，但是顶部幻灯片可以不断放大，底部栏的图标也是一样
- 图片是2倍图，拉大2倍以后图片就会逐渐模糊
rem布局注意
- 选定一个移动设备作为基准，图片一般使用2倍图或者3倍图
- 盒子尺寸直接按照设备大小进行布置，和浏览器布局一样
- img图片设置父级宽度，img宽度100%,会自动适应按比例缩放
- 背景图使用2倍图或者3倍图，使用background-size设置成需要的大小，强制缩小图片

2.4. 实际开发布局

手机端使用一套页面，基于rem布局
PC和平板一般用的是同一套页面，流体布局

1、全适配：响应式布局+流体布局
2、移动端适配：
- 流体布局+少量响应式
- 基于rem的布局

Web前端——移动端页面开发相关推荐

web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
web前端移动端项目测试的几种方法
web前端移动端项目测试的几种方法本人只是个做前端刚刚半年的小白技术还不熟练见识也不够广希望大家不喜勿喷如果有不对的地方欢迎大家指出我更加会努力的学习提高自己的水平! 本人只是 ...
[转]移动端页面开发资源总结及技巧
工作了有一段时间,基本上都在搞移动端的前端开发,工作的过程中遇到过很多问题,bug的解决方案,记录下来,以便后用!!!内容并不是很全,以后每遇到一个问题都会总结在这里,分享给大家! 一.meta标签相 ...
好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
千锋教育Web前端——PC端企业类型整页制作
千锋教育Web前端--PC端企业类型整页制作文章目录千锋教育Web前端--PC端企业类型整页制作一.PC端的布局二.源码 1.CSS源码 2.HTML源码三.运行结果一.PC端的布局通栏 ...
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址 Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=r ...
Rosin-移动端页面开发调试Fiddler插件
前言随着移动互联网大潮流的到来,移动端H5开发需求也愈加强烈.而移动端页面的调试对开发效率起着重要作用,都有什么调试方法呢? 对于Android设备,可通过设备连接Chrome浏览器进行调试(chr ...
html5前端开发做什么,Web前端能做什么开发
对于想要学习HTML5大前端的人来说,从哪里开始入手是困扰他们的难题.前端开发工作已经变的越来越复杂,仅仅是想罗列一份前端开发的学习列表就已经是一件艰巨的工作.曾经只要会编写HTML, CSS和Jav ...

Web前端——移动端页面开发

Web前端笔记

第五部分：移动端页面开发

1. 移动端与PC端页面布局区别

2. 适配布局类型

2.1. 流体布局

2.2. 响应式布局

2.3. 基于rem的布局

2.4. 实际开发布局

Web前端——移动端页面开发相关推荐

最新文章

热门文章