【转载】移动端布局概念总结

布局准备工作及布局思想及概念:

一个显示器（pc端显示器及手机屏显示器），既有物理像素，又有独立像素（独立像素也叫作css像素，用于前端人员使用）； -->重要
首先确定设计稿的尺寸，然后在对应的手机屏幕尺寸上进行开发；
设计稿的尺寸（比如320）/16 = 1ren等于多少20px，然后布局的时候，测量设计稿某个区域的宽度，比如测量的宽度是100px，100px转换为rem的步骤为：100/20 = 5rem（100px 改写成 5rem）；
在写js交互的时候，如果不确定原设计稿的尺寸的话，则就把任意一个手机屏幕的尺寸当成原设计稿的尺寸即可，比如在苹果5下进行操作。则就当原设计稿的是苹果5屏幕的尺寸。然后在查看下html的字体大小，剩下的该怎么操作，就怎么操作；
为什么不同的的设备，显示的比例是一样，因为尺寸越大，html的font-size越大，尺寸越小，html的font-size越小; 是等比例，也就是1rem在不同的设备浏览器上等于不同的像素。、
viewport设置的是浏览器可视区窗口的宽度,手机的屏幕宽度不属于浏览器可视区，手机屏幕的宽度和浏览器可视区的宽度不是一个东西； --》重要

( viewport ) gif图详解

浏览器模拟手机参数详解（图解）：

手机屏幕独立像素和物理像素数据库参考图：

转载于:https://www.cnblogs.com/aalg/p/9496260.html

【转载】移动端布局概念总结相关推荐

精通移动端布局 - 概念篇 -
本文大多数的内容基本都是从多篇博客或相关文章中进行筛选,提炼出来,原本我也想用我匮乏的语言来描述,但是发现别人已经总结的更好了,所以...我还是乖乖的站在巨人的肩膀上吧~~ 完整目录: 基本概念 ...
如何利用vw+rem进行移动端布局
前言因为在公司,只有一个前端,在做移动端布局的时候.利用px进行布局,发现,需要进行各种手机的适配. 所以在开发第二版的时候,想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同 ...
移动端布局的5种方式
刚换公司,设计稿还没出,也没有安排新任务,所以抽空整理一下移动端布局方式. 移动端布局方式整理: 1.固定meta视图 <meta name="viewport" conte ...
移动端布局 - REM方式
默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...
前端开发响应式布局和移动端布局有哪些特点和区别？
同学们在进行前端开发的时候经常会运用到响应式布局,在进行移动端页面开发的时候还会使用到移动端布局的知识,那么你知道他们都有哪些优缺点和相同之处吗?下面小千就来给大家列举一下. 响应式布局响应式布局是 ...
汽车引擎布局概念介绍(前置/中置/后置引擎的由来)
汽车引擎布局概念介绍(前置/中置/后置引擎的由来) 为什么汽车有前置,中置,后置几种引擎布局?相信很多人会说:因为某某牌的车就是那样的.引擎一般都是车体最重而且最核心的部分,引擎在车架的位置决定着汽车 ...
html移动端单位,移动端布局-媒体查询_+_rem单位布局
现在HTML干用是处框它观有理近货框万理架是察放是近5前端不仅仅局限于PC端,HTML5前端还可以实现移动端,实现微信等等,传统的布局单位px,不能是达到自适应的学校过,那么移动端布局有哪些方式呢朋说 ...
【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍布局:layout 对事物的全面规划和安排页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
html+css移动端布局
文章目录移动端一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结二.视口 **1.布局视口** `layo ...

【转载】移动端布局概念总结

【转载】移动端布局概念总结相关推荐

最新文章

热门文章