通过rem自适应屏幕尺寸
通过rem自适应屏幕尺寸
常用的前端单位
px
px就是pixel的缩写,设备分辨率,物理像素
pt
pt就是point的缩写,逻辑分辨率,逻辑像素
em
参考物是父元素的font-size,具有继承的特点
如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值
rem
css3新单位,相对于根元素html(网页)的font-size
vw
css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%
浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
vh
css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%
浏览器高度900px, 1 vh = 900px/100 = 9 px
iPhone的屏幕尺寸规格
设备 | 逻辑分辨率(pt) | 设备分辨率(px) |
---|---|---|
4(S) | 320x480 | 640x960 |
5(S) | 320x568 | 640x1136 |
6 | 375x667 | 750x1334 |
rem的使用
设置header内的<meta>
标签
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
设置header内的<script>
标签
<script type="text/javascript">
// designSize 设计稿宽度,一般为 640(px) 或 750(px)
document.documentElement.style.fontSize = document.documentElement.clientWidth / designSize *100 + 'px';
</script>
设计稿640px,以iPhone4尺寸为例
页面内有一个红色盒子宽高都是320px,里面的文字是32px
对应的逻辑分辨率为宽高160px,文字16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css适配</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<style type="text/css">
body{
margin: 0 ;padding: 0;font-size: 0.32rem;
/*
0.32rem = 0.32 * 50px = 16px (320屏幕宽度下html的font-size: 50px)
0.32rem = 0.32 * 64.68px = 20px (414屏幕宽度下html的font-size: 64.68px)
0.32rem = 0.32 * 120px = 38px (768屏幕宽度下html的font-size: 120px)
*/
}
div{
width: 3.2rem;height: 3.2rem ;background: red;
/*
3.2rem = 3.2 * 50px = 160px
*/
}
</style>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
console.log(document.documentElement.clientWidth); // 320
</script>
</head>
<body>
<div class="box">
<span class="demo">测试</span>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var font=$(".demo").css('font-size');
console.log("字体大小:",font); // 字体大小: 16px
var boxw=$(".box").css('width');
console.log("宽度:",boxw); // 宽度:160px
});
$(function(){
var font=$("html").css('font-size');
console.log("html字体大小:",font); // html字体大小: 50px
});
</script>
</html>
设计稿750px,以iPhone6尺寸为例
页面内有一个红色盒子宽高都是375px,里面的文字是37.5px
对应的逻辑分辨率为宽高187.5px,文字18.75px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css适配</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<style type="text/css">
body{
margin: 0 ;padding: 0;font-size: 0.375rem;
/*
0.375rem = 0.375 * 50px = 18.75px (375屏幕宽度下html的font-size: 50px)
0.375rem = 0.375 * 42.67px = 16px (320屏幕宽度下html的font-size: 42.67px)
0.375rem = 0.375 * 55.2px = 20px (414屏幕宽度下html的font-size: 55.2px)
*/
}
div{
width: 3.75rem;height: 3.75rem ;background: red;
/*
3.75rem = 3.75 * 50px = 187.5px
*/
}
</style>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';
console.log(document.documentElement.clientWidth); // 375
</script>
</head>
<body>
<div class="box">
<span class="demo">测试</span>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var font=$(".demo").css('font-size');
console.log("字体大小:",font); // 字体大小: 18.75px
var boxw=$(".box").css('width');
console.log("宽度:",boxw); // 宽度:187.5px
});
$(function(){
var font=$("html").css('font-size');
console.log("html字体大小:",font); // html字体大小: 50px
});
</script>
</html>
通过rem自适应屏幕尺寸的更多相关文章
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- Delphi 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题
给你一段代码,网上转的:unit uMyClassHelpers;//实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题.// 陈小斌,2012年3月5日 interface Uses ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- 移动端rem自适应设置
对于移动端自适应各种终端的解决方案较多,本篇只是选择其中一种rem适配,我个人做移动端最喜欢的方案. rem就是以html根元素的字体大小为参考,比如html:font-size:20px;1rem= ...
- 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应
rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...
- iosiPhone屏幕尺寸、分辨率及适配
iosiPhone屏幕尺寸.分辨率及适配 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Fac ...
- Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸
一.引言 Android的开源使厂商无需自行研发OS,大大降低了研发.生产的成本,使得Android平板品牌如雨后春笋般爆发,山寨机厂商们似乎又找到了一丝希望.与此同时带来的是广大开发者的苦不堪言,各 ...
- iPhone屏幕尺寸、分辨率及适配
转:http://blog.csdn.net/phunxm/article/details/42174937 目录(?)[+] 1.iPhone尺寸规格 设备 iPhone 宽 Width 高 H ...
- android自适应屏幕方向和大小
一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢? 其实很简单,只需要在res目录下 ...
随机推荐
- python中继承的语法及案列
案例: 1 class Chinese: # 类的创建,类名首字母大写 2 eye = 'black' # 类属性的创建 3 4 def eat(self): # 实例方法创建 5 print('吃饭 ...
- PostgreSQL VACUUM 之深入浅出 (四)
VACUUM 参数优化 上面已经介绍过了以下设置表级 AUTOVACUUM 相关参数和 autovacuum_max_workers: ALTER TABLE pgbench_accounts SET ...
- 实践GoF的23种设计模式:SOLID原则(上)
摘要:本文以我们日常开发中经常碰到的一些技术/问题/场景作为切入点,示范如何运用设计模式来完成相关的实现. 本文分享自华为云社区<实践GoF的23种设计模式:SOLID原则(上)>,作者: ...
- 【Windows 操作系统】Windows 进程的内核对象句柄表
总结: 1.句柄就是进程句柄表中的索引.2.句柄是对进程范围内一个内核对象地址的引用,一个进程的句柄传给另一个进程是无效的.一个内核对象可用有多个句柄.Windows之所以要设立句柄,根本上源于内存管 ...
- 常用的一些性能查询sql语句
转至:https://blog.csdn.net/bosschen/article/details/84829912 --查看表锁 select * from sys.v_$sqlarea where ...
- cannot send list of active checks to "127.0.0.1": host [Zabbix server] not monitored
查看错误日志: /etc/log/zabbix/zabbix_server.log 3148:20210404:233938.363 cannot send list of active check ...
- 痞子衡嵌入式:揭秘i.MXRTxxx系列上串行NOR Flash双程序可交替启动设计
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT500/600上串行NOR Flash双程序可交替启动设计. 在上一篇文章 <i.MXRT1170上串行NOR Fla ...
- Qt:foreach
0.说明 Qt提供一个关键字foreach(实际上是<QtGlobal>中定义的一个宏)用于方便地访问容器中的所有数据项. foreach关键字用于遍历容器中的所有数据项 注意 forea ...
- 携程applo配置
1.官网文档 https://github.com/ctripcorp/apollo/wiki/%E5%88%86%E5%B8%83%E5%BC%8F%E9%83%A8%E7%BD%B2%E6%8C% ...
- 云原生入门 第五章:kubernetes学习实践
1. 简介 在本章中,我们将学习不同的Kubernetes对象,它们的用途以及如何与它们交互. 在设置集群或使用现有集群之后,我们可以开始部署一些工作负载.Kubernetes中最小的计算单元不是一个 ...