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

技术交流QQ群:1027579432,欢迎你的加入!

1.移动端基础

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

2.视口

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

3.meta视口标签

  • 语法格式:
    1
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

meta视口标签属性.png

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

4.二倍图

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

5.多倍图

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

6.背景缩放background-size

  • background-size属性规定了背景图像的尺寸;
  • 语法格式:

    1
    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不会撑大盒子;

      1
      2
      3
      4
      <!-- CSS3盒子模型 -->
      box-sizing: border-box;
      <!-- 传统盒子模型 -->
      box-sizing: content-box;
    • 移动端可以全部使用CSS3盒子模型;

    • PC端如果完全需要兼容,就使用传统盒子模型;如果不考虑兼容性,就选择CSS3盒子模型;

9.特殊样式

1
2
3
4
5
6
7
8
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.资料下载

本文标题:01移动端布局基础之流式布局

文章作者:Curry_Coder

发布时间:2020年03月08日 - 14:24:06

最后更新:2020年03月11日 - 12:10:36

原始链接:https://cdlwhm1217096231.github.io/Web前端开发/01移动端布局基础之流式布局/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢您的阅读-------------
觉得对您有所帮助,请我喝杯可乐吧!