01移动端布局基础之流式布局

技术交流QQ群:1027579432，欢迎你的加入！

1.移动端基础

浏览器现状
- PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器等。
  移动端常见浏览器：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器等。
国内的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于安卓修改开发的一样。
总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
手机屏幕现状
- 移动端设备屏幕尺寸非常多，碎片化严重；
- Android设备有多种分辨率：480*480、480*854、720*1280、1080*1920等；
- 作为开发者无需关注这些分辨率，因为常用的尺寸单位是px；
常见移动端屏幕尺寸
移动端调试方法
- Chrome DevTools(谷歌浏览器)的模拟手机调试；
- 搭建本地web服务器，手机和服务器在一个局域网内，通过手机访问服务器；
- 使用外网服务器，直接IP或域名访问；

2.视口

视口：浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口、理想视口。
布局视口layout viewport
- 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题；
- IOS、Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页；
视觉视口visual viewport
- 它是用户正在看到的网站的区域。注意：是网站的区域；
- 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍然保持原来的宽度；
理想视口ideal viewport
- 为了使网站能在移动端有最理想的浏览和阅读宽度而设定；
- 理想视口，对设备来说，是最理论的视口尺寸；
- 需要手动添加meta视口标签通知浏览器操作；
- meta视口标签主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局视口就要有多宽。

3.meta视口标签

语法格式：

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

标准的viewport设置
- 视口宽度和设备保持一致；
- 视口的默认缩放比例1.0；
- 不允许用户自行缩放；
- 最大允许的缩放比例1.0；
- 最小允许的缩放比例1.0；

4.二倍图

物理像素和物理像素比
- 物理像素指的是屏幕显示的最小颗粒，是物理中真实存在的。这是厂商在出厂时就设置好了。例如苹果手机的750*1334；
- 开发时的1px不是一定等于1个物理像素的；
- PC端页面中，1px等于1个物理像素的，但是移动端就不尽相同；
- 1px能显示的物理像素点的个数，称为物理像素比或屏幕像素比；

5.多倍图

PC端和手机端的手机屏幕/普通手机屏幕：1CSS像素=1物理像素
Retina(视网膜屏幕)是一种显示技术，可以把更多的物理像素点压缩至一块屏幕中，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊；
在标准的viewport设置中，使用倍图来提高图片的质量，解决在高清设备中的模糊问题；
通常使用二倍图，因为iphone8的影响，但是现在还存在3倍图、4倍图的情况，这个根据实际开发需求；
背景图片，注意缩放问题；

6.背景缩放background-size

background-size属性规定了背景图像的尺寸；

语法格式：

background-size: 背景图片宽度 背景图片高度;

单位：长度或百分比或cover或contain；
cover把背景图像扩展足够大，从而使背景图像完全覆盖背景区域；
contain把背景图像扩展到最大尺寸，从而使宽度和高度完全适应内容区域；
多倍图切图cutterman
- @1*1倍图原图
- @2*2倍图
- @3*3倍图

7.移动端开发选择

a.单独制作移动端页面(主流)：通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳动移动端页面。
- 京东商城手机版
- 淘宝触屏版
- 苏宁易购手机版
b.响应式页面兼容移动端(其次)：通过判断屏幕宽度改变样式，以适应不同终端。缺点：制作麻烦，需要花很多精力去调兼容性问题。
- 三星手机官网

8.移动端技术解决方案

移动端浏览器
- 移动端浏览器基本以webkit内核为主，因此就需要考虑webkit兼容性问题；
- 可以放心使用H5标签和CSS3样式；
- 同时，我们浏览器的私有前缀只需要考虑添加webkit即可；
CSS样式初始化normalize.css
- 移动端CSS初始化推荐使用normalize.css；
CSS盒子模型box-sizing
- 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding；
- CSS3盒子模型：盒子的宽度 = CSS中设置的宽度width里面包含了border和padding。即CSS3中的盒子模型，padding和border不会撑大盒子；
```

box-sizing: border-box;

box-sizing: content-box;
```
- 移动端可以全部使用CSS3盒子模型；
- PC端如果完全需要兼容，就使用传统盒子模型；如果不考虑兼容性，就选择CSS3盒子模型；

9.特殊样式

<!-- CSS盒子模型 -->
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;}

10.移动端常见布局

移动端布局和PC端有所区别：
- a.单独制作移动端页面(主流)
  - 流式布局(百分比布局)
  - flex弹性布局(强烈推荐)
  - less+rem+媒体查询布局
  - 混合布局
- b.响应式页面兼容移动端(其次)
  - 媒体查询
  - bootstarp

11.移动端布局之流式布局

流式布局，就是百分比布局，也称为非固定像素布局；
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充；
流式布局方式是移动web开发中使用的比较常见的布局方式；
max-width 最大宽度(max-height 最大高度)
min-width 最小宽度 (min-height 最小高度)

12.资料下载

笔记及代码，欢迎star,follow,fork…

01移动端布局基础之流式布局相关推荐

02移动端布局基础之流式布局项目实战(京东移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.技术选型方案:采取单独制作移动页面方案技术:布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` < ...
CSS的三大布局方式（流式布局，浮动布局和层布局）
文章目录前言一.标准文档流二.三种布局方式 1.流式布局 2.浮动布局 (1)字围效果 (2)圣杯布局 3.层布局定位的分类: (1) 相对定位 position:relative (2) 绝 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
html5流式布局,流式布局是什么?流式布局详细介绍
在PC端进行网页制作时,经常使用固定像素并且内容居中的网页布局,为了适应小屏幕的设备,在移动设备和跨平台(响应式)网页开发过程中,多数使用流式布局,下面我们就对流式布局进行详细介绍. 流式布局是一种等 ...
android recyclerview流式布局,Android FlexboxLayout流式布局
Android FlexboxLayout流式布局 FlexBoxLayout是为Android带来了与 CSS Flexible Box Layout(CSS 弹性盒子)相似功能的库. 一:添加依赖 ...
android 流式布局官方,Android 流式布局
FlowLayoutManager 这是一个自定义实现流式布局的LayoutManager,配合RecyclerView使用,可实现标签效果:目前的问题是没有实现View的缓存,以后再补吧. 代码示例 ...
Swing布局管理器--流式布局管理器
流式布局管理器 FlowLayout流式布局管理器,是JPanel和JApplet的默认布局管理 FlowLayout会将组件从上到下,从左到右的放置规律逐渐进行定位,直到占据这一行所在的空间,才会向 ...
4.布局：FlowLayout流式布局（Java swing 入门）
FlowLayout(流式布局管理器)是 JPanel 和 JApplet 的默认布局管理器.FlowLayout 会将组件按照从上到下.从左到右的放置规律逐行进行定位.与其他布局管理器不同的是,Fl ...
android 热搜词布局,Android FlowLayout流式布局打造热门标签（高仿抖音热搜）
需要先学习下面2个内容 1.已经基本给大家介绍了如何自定义ViewGroup,如果你还不了解 2.宽高的计算一.XML布局从布局图中可以看到,FlowLayout中包含了很多TextView.难度 ...

01移动端布局基础之流式布局

技术交流QQ群:1027579432，欢迎你的加入！

1.移动端基础

2.视口

3.meta视口标签

4.二倍图

5.多倍图

6.背景缩放background-size

7.移动端开发选择

8.移动端技术解决方案

9.特殊样式

10.移动端常见布局

11.移动端布局之流式布局

12.资料下载

01移动端布局基础之流式布局相关推荐

最新文章

热门文章