移动端布局原理和移动端布局几种方式

总结移动端布局把，首先了解移动端布局，必须了解一下移动端的情况总结了几点

1.屏幕碎片化
在移动端屏幕尺寸非常之多,碎片化严重，（就当都拿苹果手机来说，苹果5s 的屏幕尺寸是320，苹果6，7，8的屏幕尺寸是375，苹果6，7，8plus的屏幕尺寸是414，想一下苹果手机，都有这多屏幕尺寸，在想一样现在的手机品牌，不可能我们把所以的手机尺寸的都做一个网站把）

2.物理像素比
物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334，物理像素其实就是我们的分辨率，分辨率为750*1344，那么一行可以放750个像素点，我们开发时候的1px 不是一定等于1个物理像素的，PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同，一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比（大家可以做个试验，建造一个dome（网页，通过谷歌浏览器的调试工具测试），给div 一个高宽背景颜色，按照苹果6的尺寸：375px ，会发现div只占了苹果6 手机屏幕的一半，以此得出苹果6手机的物理像素比是1:2）

上面总结了屏幕碎片化和物理像素比，以此又必须了解以下几个知识

1.三大视口

（1）布局视口 layout viewport
    一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题，iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页，布局视口为啥设置为980px？因为我们PC端的网页一般就是1000左右，所以差不多能显示完，布局视口的缺点，就是现实的pc的网页的内容会比较小。

（2）视觉视口 visual viewport
它是用户正在看到的网站的区域，注意：是网站的区域，我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度，一个比较大的布局视口，想要在一个比较小的视觉视口中显示完整，并不合适，会显得网站元素很小

（3）理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽，目前移动端网站都是通过理想视口和媒体查询实现良好的移动端布局

2.二倍图，多背图

大家都知道在移动端存在物理像素比的问题那么在使用图片的就经常使用二倍图（打个比方：你的图片的像素是50*50，那么放在pc端上显示还是50*50，放在移动端上面就会放大，按照物理像素比1:2 那么图片的像素就是100*100这样图片就会模糊，不清楚，）所以我们在显示图片的时候图片，都是我们需要的按照原图放大二倍的图片进行展示，这样不会图片模糊，当然网页元素也是要按照放大2倍处理。

总结了以上几点知识我们在来了解一下移动端常用的几种布局方式

（1）百分百布局（流失布局）
    主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用）
特点：宽度百分百，高度写死
缺点：高度或者文字很难自适应

（2）flex布局（弹性布局）
    采用flex 通过份数进行布局，这个份数是flex专有的在后面的笔记会记录
特点：宽度弹性布局，高度写死
缺点：高度和文字很难自适应
优点：灵活简介

（3）rem布局
类似于百分百布局，但是又有些区别，百分百布局，只能操作盒子大小进行适配，而rem布局，能控制文字大小
    原理：不同尺寸屏幕下给根元素设置不同的文字大小（利用媒体查询或JS），宽、高、间距…都统一使用 REM 单位。
使用：量取到的设计稿尺寸除以根元素字体大小（基准值）即可，例如使用 flexible.js，150px 用 rem 表示就是 2rem。
    优点：高度和文字可以自适应

（4）响应式布局
     检测窗口大小利用媒体查询布局，不过一般都使用bootstrap框架

总结一下，移动端的存在碎片化，物理像素比的问题那么解决方案比较好的就是以上介绍的几种布局，当然还有其他布局方式，都是大同小异，这几种是目前最流行，常用的布局方式

学习笔记

admin

相关推荐

网友评论（0）

分类

热门标签

友情链接