基本概念

背景：

因为手机的尺寸和屏幕的像素越来越大，导致我们响应式布局很难保证网页能够100%适配主流的屏幕

概念：

使用css3的单位以及弹性布局等技术来实现移动端布局。一般移动端布局跟pc端是完全不一样的。

屏幕像素

逻辑像素：

真正用于显示屏幕内容的像素

设备物理像素：

是屏幕一出场已经确定的像素

逻辑像素和设备物理像素：

设备物理像素是指屏幕的实际像素有多少。但现在的手机屏幕一般物理像素都是1920*1080或者2k或更高。但如果一个设备物理像素等于一个逻辑像素（css px），会导致1920px内容挤在手机屏幕里，无法查看，所以才使用逻辑像素来显示页面

常见逻辑像素（移动端页面宽高）：

iPhone：375和414

320（少数）

android：360

414

480

视口（viewport）

概念：

视口即手机屏幕上用于显示页面的那块区域。同时HTML可以利用<meta>标签来控制网页在手机屏幕的展示方式。

手机网页展示分类：

布局视口：

pc端是什么样，手机就是什么样。在移动端，会将pc端的所有内容都挤在手机屏幕里。内容极度挤压无法看清。

理想视口：

按照手机的逻辑像素进行页面布局(一个逻辑像素=一个css像素）。

需要手动配置。

在<head>中添加以下一句代码，开启理想视口。

视觉视口

移动端常用单位

px：

绝对长度度量单位。

em：

相对度量单位，是跟当前标签的font-size有关。如font-size=14px，1em=14px。如果当前标签没有设置font-size，那么就找父元素的font-size，直到浏览器默认大小为止。ie全系支持。

rem：

直接以根标签（html）的font-size作为参考，如果HTML没有设置font-size，那么直接参考浏览器的默认大小。ie8不支持。

vw：

也是一个相对单位，指的是设备的视口宽度。1vw=视口宽度的1%，ie8不支持。

vh：

也是一个相对单位，指的是设备的视口高度。1vh=视口高度的1%

单位选择：

rem是用font-size来设置大小，所有更适合于文字大小的自适应。
vw和vh是相对于视口来处理，所以可以用来设置盒子的尺寸（width和height、margin、padding）
vw、vh因为是视口大小，没有大小限制，所以在宽高限制上还是要配合min-width和min-height来一起使用
一般针对于移动端，盒子的宽高会使用vw，因为一般手机的宽度不会相差很大，但高度差距比较明显

移动端兼容性

移动端页面实际参考的尺寸即该手机的逻辑像素

每个手机的逻辑像素不同，导致页面存在宽度不同，即页面宽度存在兼容性问题。

移动端实战

原理：

以手机的逻辑像素为页面宽度，进行页面布局，而我们称这种针对移动端的布局方式叫移动端布局。

适配移动端主流逻辑像素：

iPhone：320 375 414 480 android：360 ipad：768 1024 pc：992

一般步骤

需保证页面使用的是理想视口，能够保证我们是以逻辑像素来进行布局

移动端解决方案：

rem+弹性布局（或rem+流式布局）：

原理：利用屏幕的宽度不同利用媒体查询给HTML设置不同的font-size，移动端布局中的文字、盒子尺寸都用rem进行设置。对于一些比较特殊的盒子，比如（固定的，或者需要参考页面宽度的），可以使用vw、vh进行设置。
缺点：单独写一套代码，与pc端完全不同

响应式布局：

响应式布局是移动端友好，在pc端、移动端共用一套方案。
缺点：
- 不能很好的适配100%的手机屏幕
- 大量css代码，不便于维护

固定布局：

手机端页面内容固定宽度参考320或375，页面内容水平居中。

标准的移动端页面

需要设置页面的视口为理想视口，用户不能缩放，缩放比例为1.0

利用<meta>来设置

width=decive-width：页面宽度=设备的逻辑像素，即使用理想视口。
initial-scale=1.0：页面的默认比例为1.0。这保证了css中的一个px就等于手机页面中的一个px。
user-scalable：yes或or；设置用户是否可以通过手势来进行缩放页面。建议不允许。

rem+弹性布局（或rem+流式布局）：

1、确定页面框架（div+HTML5标签）

2、确定页面的主要参考逻辑像素（375 360 768 1024），以此为基础确定HTML标签的font-size。

320px->font-size:30px;
375px->font-size:40px;
414px->font-size:50px;

3.开发页面（从上往下）

盒子的尺寸是以rem为基础。
需要利用媒体查询来设置当屏幕的逻辑像素不同时,HTML标签采用不同的font-size。
像具体的内容处理（img 表单元素文字超链接,,,)跟以前一样，并没有什么区别。
以rem代替px，百分比保留。

布局方案抉择

像文字比较多的页面可以参考使用rem解决方案，比如淘宝、王者荣耀

像图案比较多的，布局简单点，可以响应式布局，或者响应式+流式布局来搞定

CSS--移动端布局相关推荐

CSS - 移动端布局（二）移动端适配
目录通过上一节的学习移动端网页的布局固定尺寸布局百分比布局 rem布局 vw布局仿京东移动端首页开发实例(rem布局.vw布局) 通过上一节的学习 CSS - 移动端布局(一)关键的前置知识 ...
CSS - 移动端布局（一）关键的前置知识
目录物理像素 & 物理分辨率 CSS像素 & 逻辑分辨率设备独立像素 DIP & 设备像素比 DPR 屏幕尺寸 & 像素密度 PPI 视网膜显示屏 & 深入 ...
html+css移动端布局
文章目录移动端一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结二.视口 **1.布局视口** `layo ...
CSS - 响应式布局（一）媒体查询
目录响应式布局引子理解响应式网页和响应式布局原理媒体查询什么是媒体查询? 什么是媒体类型? 什么是媒体特性? 媒体查询语法仿三星官网首页响应式布局引子通过前面两节的学习 CSS - ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
css fix 手机端,移动端布局fixed问题解决方案
今天测试忽然提了一个bug,关于position:fixed的问题,一般情况下使用并没问题,当页面出现表单时,由于弹出键盘,整个页面会出现布局错位问题,或者含有fixed的模块会空白(ios11比较明 ...
[css] 移动端的布局用过媒体查询吗？写出例子看看
[css] 移动端的布局用过媒体查询吗?写出例子看看 @media [type] and [condition] - not [condition] {- } @media [condition] a ...
[css] 移动端的布局用过媒体查询吗？写一个试试
[css] 移动端的布局用过媒体查询吗?写一个试试使用过Demo<style>.demo {width: 100px;height: 100px;background: #000000; ...
【CSS】关于CSS的几种移动端布局方式
关于CSS的几种移动端布局方式一.移动端布局 01.meta视口标签设置 02.移动布局的分类有哪些? 03.为什么需要二倍图? (1)物理像素和物理像素比 (2)二倍图(根据需要确定多倍图) (3 ...
html手机端适配怎么调试,html5面试常见问题及答案：移动端布局与适配篇
原标题:html5面试常见问题及答案:移动端布局与适配篇 1. 移动布局自适应不同屏幕的几种方式 (1)响应式布局 (2)100%布局(弹性布局) (3)等比缩放布局(rem) 2. iscroll安 ...

CSS--移动端布局

基本概念

背景：

概念：

屏幕像素

逻辑像素：

设备物理像素：

逻辑像素和设备物理像素：

常见逻辑像素（移动端页面宽高）：

视口（viewport）

概念：

手机网页展示分类：

移动端常用单位

px：

em：

rem：

vw：

vh：

单位选择：

移动端兼容性

移动端实战

原理：

适配移动端主流逻辑像素：

一般步骤

移动端解决方案：

标准的移动端页面

rem+弹性布局（或rem+流式布局）：

布局方案抉择

CSS--移动端布局相关推荐

最新文章

热门文章