飞数石家庄网站建设,桂阳 网站建设,网页升级中每天自动更新,犀牛云网站建设特点1、任意浏览器的默认字体高都是16px。谷歌浏览器显示的最小字体大小是12px。
exp#xff1a;突破谷歌浏览器显示12px限制。
#xff08;1#xff09;、div文本/div 文本嵌套块标签#xff0c;这是因为缩放只对有宽高的标签有效#xff0c;缩放的时候也是…1、任意浏览器的默认字体高都是16px。谷歌浏览器显示的最小字体大小是12px。
exp突破谷歌浏览器显示12px限制。
1、div文本/div 文本嵌套块标签这是因为缩放只对有宽高的标签有效缩放的时候也是将标签一起缩放而不仅仅是缩放文本所以如果使用span等行内标签时还需要将行内标签进行元素转换为块元素display:block; 2、font-size12px 给文本设置字体12px并设置缩放值为10/120.83333也就是transform:scale(0.83)如果要设置8px那就是8/120.66666 3、transform-origin0 0 默认缩放中心点是在盒子的正中心所以如果我们需要文本左对齐就需要改变中心点也就是transform-origin0 0该值有两个参数值第一个是水平方位值第二个是垂直方位值对应的如果需要右对齐、或者是有缩进那就改变对应的参数值即可。 4、white-space: nowrap; 文本进行缩放后并不会改变其原来盒子的大小只是视觉上改变了大小也就是说如果文本有换行的时候它进行缩放后仍然是折行显示这显然不符合我们要求所以我们还需要强制文本在一行显示也就是 white-space: nowrap;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 300px;height: 30px;margin-bottom: 5px;background: rgb(206, 151, 151);}.box1 {font-size: 12px;}.box2 {font-size: 10px;transform: scale(0.83333);transform-origin: 0 0;white-space: nowrap;}/style
/head
bodydiv classbox1我是正常的12px的文字大小 Hello world!/divdiv classbox1我是正常的12px的文字大小 Hello world!/divdiv classbox2我是正常的10px的文字大小 Hello world!/divdiv classbox2我是正常的10px的文字大小 Hello world!/div
/body
/html2、em是相当于当前对象内的文本尺寸当前对象没有那就继承父级。
3、rem是相对于html元素的字体大小。
4、em、rem一般都应用于移动端按“设计稿/实际屏幕宽度”来按比例设置html的font-size按比例放大或者缩小页面。如果直接写的px那在不同宽高的屏幕上都显示的一样的。
5、vwviewpoint width视窗宽度1vw等于视窗宽度的1%。 vhviewpoint height视窗高度1vh等于视窗高度的1%。 vminvw和vh中较小的那个。vmaxvw和vh中较大的那个。
6、rpx
rpx是微信小程序独有的、解决屏幕自适应的尺寸单位可以根据屏幕宽度进行自适应不论大小屏幕规定屏幕宽为 750rpx通过 rpx 设置元素和字体的大小小程序在不同尺寸的屏幕下可以实现自动适配
7、为什么web端不使用rem?
因为在大多数场景下用户使用更大的屏幕是想看到更多的内容而不是更大的字。
8、1px到底有多长呢
首先我们要介绍分辨率这个概念比如1024*768代表的就是这个屏幕水平方向有1024个像素垂直方向有768个像素。
假如这个屏幕宽度是1024cm,那么对于这个屏幕来说水平方向上1px就是1cm当然一般不会有那么宽的屏幕。
所以1px究竟有多长取决于分辨率取决于屏幕大小。1px 屏幕长度/分辨率
exp:
(1)当同一块屏幕。当你调整了分辨率水平方向的分辨率变大但是屏幕实际宽度还是这么大所以1px的实际长度就变小了。
(2)当一大一小的屏幕相同的分辨率那么屏幕大的1px实际长度就大。
9、移动设备的物理像素、逻辑像素、设备像素比
1document.documentElement.clientWidth获取的宽度都是逻辑像素
2在手机上物理像素是改变不了的但是你设置的逻辑像素px到底用多少物理像素显示是取决于像素比的。
以渲染一个宽度铺满屏幕的div举例说明
情况1: 375x667devicePixelRatio1、750x1334devicePixelRatio2一使用px布局不会影响布局
设置div宽度为375px那么在375x667的屏幕水平方向上刚好由375独立像素渲染即刚好占满屏幕全部宽度而在750x1334屏幕上由于该屏幕的deviceRatio为2水平方向渲染一个css像素实际使用2个像素即该div水平方向由750个独立像素渲染也刚好占满屏幕所以在这两种屏幕上即使使用px布局渲染效果也是一样的
情况2: 375x667devicePixelRatio1、360x640devicePixelRatio1使用px影响布局
设置div宽度为375px那么在375x667的屏幕水平方向上刚好由375独立像素渲染即刚好占满屏幕全部宽度而在360*640屏幕上由于该屏幕的deviceRatio同为1水平方向渲染一个css像素实际使用1个像素即该div水平方向由375个独立像素渲染超出屏幕宽度布局受到影响。
3设计给的倍图的使用
根据设计稿设计了宽高后像素比dpr为1就用1倍图
像素比dpr为2就用二倍图。因为图像实际是100px的你设置50px放大两倍就是100px了。
41px在不同像素比上粗细不同解决方案使用transform:scale。
exp: 很多浏览器也显示不了0.5px这个时候也用这个属性能显示0.5px的效果。不同内核的浏览器对小数像素的显示和处理也不同。
.border-bottom-1px {position: relative;
}.border-bottom-1px::after {content: ;width: 100%;height: 0;position: absolute;left: 0;bottom: 0;overflow: hidden;border-bottom: 1px black solid;transform-origin: left bottom;
}media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {.border-bottom-1px::after {-webkit-transform: scaleY(.7);transform: scaleY(.7);}
}media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {.border-bottom-1px::after {-webkit-transform: scaleY(.5);transform: scaleY(.5);}
}media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3) {.border-bottom-1px ::after {-webkit-transform: scaleY(.33);transform: scaleY(.33);}
}移动web开发相关知识 物理像素、逻辑像素、设备像素比、移动端常见布局、布局视口、视觉视口、理想视口_小杨同学呀呀呀呀的博客-CSDN博客
物理像素、逻辑像素、CSS像素、PPI、设备像素比分别是什么 - 知乎
前端的物理像素、逻辑像素、移动端1像素边框解决方案_小凳子腿的博客-CSDN博客
总结
在pc端直接使用px。但是不同浏览器有显示的最小字体大小和border大小都可以使用transform:scale来实现如小于12px的字体和0.5px。
在移动端使用rem。实现等比例放大缩小。但是还有像素比这个概念设计给的倍图就是在不同像素比的手机下怕失真才用的。
小程序使用rpx。不管宽度多宽都是750rpx。
