使用rem单位布局的时候有什么好处_好程序员web前端技术分享移动端页面布局
好程序员web前端技术分享移动端页面布局
一、弹性布局(100%布局)的特点
顶部与底部的bar不管分辨率怎么变,它的⾼度和位置都不变; 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息 都位于条目的左边,薪资都位于右边.
特点:关键元素高宽和位置都不变,只有容器元素在做伸缩变换。对于这类app,记住一个开发原则就好:文字流式,控件弹性,图片等比缩放
二、什么是屏幕尺寸?
移动端屏幕尺寸:屏幕对角线的长度,单位是英寸(1英寸=2.54厘米)。
常见的尺寸有:2.4,2.8,3.5,3.7,4.2,5.0,5.5,6.0
三、什么是屏幕分辨率?
屏幕分辨率:指横纵方向上的像素点数,单位为px,1px=1个像素点。
一般以纵向像素*横向像素表示 一个手机的屏幕分辨率。如:1960*1080
这里的一个像素是指物理设备的一个像素点。
四、什么是屏幕像素密度?
屏幕像素密度:屏幕上每英寸可以显示像素点的数量,单位是ppi(pixels per inch)缩写。
屏幕像素密度与屏幕尺寸,屏幕分辨率有关,在单一条件下,屏幕尺寸越小,分辨率越高,像素密度越大,反之越小。
iphone3GS和iphone4区别:屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍。
PX:像素,将显示器分成非常细小的方格,每一个方格就是1px。
注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。
实际上像素分为两种:设备像素和逻辑像素( CSS像素)
DPR:设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设备像素和CSS像素的比值
在早先的移动设备中,并没有DPR的概念。随着技术的发展,移动设备的屏幕像素密度越来越高。从iphone4开始苹果公司推出了所谓的retina视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于是DPR = 2
五、等比缩放布局(rem布局)
1.rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。
2.为什么web app要使用rem?
实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,
六、vw vh
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Android browser4.4+支持,chrome for android39支持
七、Rem配合VW做等比缩放布局
1.rem
rem是指相对于根元素的字体大小的单位。
2.根元素
如果根元素是相对设备尺寸自动变换。
3.VW
视窗宽度,1vw等于视窗宽度的1%。
4.VW转换成PX赋值给font-size
例:设备的分辨率为640*1136,逻辑像素为320*568 1VW=3.2px
Font-size:100px;转换成VW font-size:31.25vw;
1rem=31.25vw可一起结合写等比例缩放布局。
八、100%布局(弹性布局)
实现方案:采用PX方式,借助弹性盒实现。
九、等比例缩放布局(rem布局)
1.html{font-size:31.25vw(可变:设计稿);}
31.25vw=100px(50px或100px为基准单位(好算))/3.2px
3.2px=320(视口宽度)/100(1vw等于视窗宽度的1%。)
元素大小(rem)=原图量尺寸/dpr/100(50px、100px为基准单位(好算))
2,用媒体查询设置html的font-size配合rem(设置判断条件的节点)
3, 通过JS动态设置html的font-size同样元素单位也要配合rem实现等比例缩放布局。
使用rem单位布局的时候有什么好处_好程序员web前端技术分享移动端页面布局相关推荐
- 移动端页面布局方式,简单记录一下
目录 1.视口 2.多倍图 3.移动端开发选择 4.移动端技术解决方案 5.移动端常见布局 6.流式布局 7.flex弹性布局 ①flex与传统布局比较 ②flex布局原理 ③常见父项属性 8.rem ...
- 响应式网页设计移动端页面布局
响应式网页设计 将弹性布局.弹性图片.媒体和媒体查询三种已有的开发技术整合起来,并命名响应式网页设计 媒体类型 常遇到的媒体类型是 All(全部) Screen(屏幕) Print(页面打印或打印预览 ...
- Web前端之仿携程首页布局
Web前端之仿携程首页布局 1.前言 出于之前早就学习过Web的相关技术,后面很少写仿网页或者做后端等案例了,导致一些基础知识点有所遗忘,而这部分知识又是Java学习中的重中之重,因此借目前学校课程正 ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- android 布局 字体大小,移动端页面布局及字体大小该如何设置
之前发过一篇文章<移动端应该如何动态设置字体大小?>,主要说了移动web端布局的一些解决方法,本文再一次把这个问题提出来,并分别对安卓和IOS设备的屏幕了解做出自己的分享,在进入正文之前最 ...
- 事业编还是程序员_头条员工为不加班,降薪去事业单位,结果蒙了:还不如当程序员...
现在大家都知道互联网加班非常严重,尤其是在北上广大线城市,到晚上都可以看见互联网公司灯火通明,所以有些人为了逃避加班,会选择去事业单位或者公务员,可是往往都要降薪不少,下面就一位程序员跳槽事业单位的奇 ...
- Web前端笔记(9) flex布局
flex弹性布局: 1. flex弹性盒模型: 随着移动互联网的发展,对布局的要求越来越高,传统的布局方案对于实现特殊布局非常的不方便,比如垂直居中,2009年W3C提出了一种新的布局方案---fle ...
- Web:flex模拟移动商城首页页面布局/grid布局的相关属性
flex模拟移动商城首页页面布局 1.布局页面导航 大家可以看到图片上的红色边框,用了flex布局,布局了一个多行容器,采用的是无序列表ul. css代码块 /* 设置导航样式,定义flex容器 */ ...
- 刚发布!美国今年要砸8.5亿美元布局AI,这两件事,程序员一定做准备了!
就在最近,美国白宫发布了<"美国人工智能计划":首个年度报告>,根据美国发布的2021财年预算申请文件,美国国家科学基金会为其AI项目申请了8.5亿美元!比2020财年 ...
- 【web前端HTML5+CSS3】03CSS--layout(布局)之盒模型
目录 1.文档流 2.盒模型 3.盒模型--边框 4.盒模型--内边距 5.盒模型--外边距 6.盒子的水平布局 7.盒子的垂直布局 8.外边框的折叠 9.行内元素的盒模型 10.默认样式 11.练习 ...
最新文章
- CentOS安装VSFTP及配置用户
- (pytorch-深度学习系列)pytorch避免过拟合-dropout丢弃法的实现-学习笔记
- vue判断组件是否显示_vue组件中watch props根据v-if动态判断并挂载DOM的问题
- uuid表示时间的部分_基于时间UUID的妙用
- XCode各种告警处理
- testng 取消并行_TestNG并行执行
- for in和for of的区别(转)
- ISO 17799 /27001标准简介
- Java 自动化测试详解
- 如何把一张图片做成一个好看的电脑图标
- 《大数据之路:阿里巴巴大数据实践》-第2篇 数据模型篇 -第10章 维度设计
- 最新《Linux系统优化+Linux综合架构课程》
- python编写英文字典_python如何制作英文字典
- 论“蹭热点”,我只服“杜蕾斯”,今天咋们一起来盘点 它曾蹭过的10大神热点!...
- Ehcache二级缓配置永不过期,缓存失效问题 ---- 原因没有加载ehcache.xml配置文件,加载了默认的ehcache-failsafe.xml配置文件
- Docker 多阶级构建:Docker 下如何实现镜像多阶级构建?
- QComboBox 设置下拉列表颜色
- MOSFET 和 IGBT 栅极驱动器电路的基本原理学习笔记(一)MOSFET技术
- Atcoder Grand Contest 012 B - Splatter Painting解题报告
- 【078】比才歌剧《卡门》序曲