px:像素 px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率的最小分割。由于它是固定大小的单位,单独用它来设计的网页,如果适应大屏幕(电脑),在小屏幕(手机)上就会很不友好,做不到自适应的效果。 em ...
分类:
Web程序 时间:
2020-04-02 16:07:13
阅读次数:
80
之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。 但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。 Px是相对固定单位,字号大小直接被定死,所以用户无法 ...
分类:
其他好文 时间:
2020-04-02 15:47:48
阅读次数:
81
rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html ...
分类:
移动开发 时间:
2020-04-01 17:47:17
阅读次数:
87
View、Text、Image组件 View 1. 示例代码 2. view控件属性: class="" 样式类 Text 1. 示例代码 2. text控件属性: class="" 样式类 font size="" 字体大小 单位可以为px或者rpx,有关rpx后面会提到 font weight= ...
分类:
其他好文 时间:
2020-03-31 23:10:35
阅读次数:
137
在使用postcss-px-to-viewport这个组件时,发现了postcss.config.js中的配置总不生效,但是在vue.config.js中的配置却能生效,最后查明原因,是因为package.json中的postcss节点配置是一个空“{}”。 所以总结了下面的一个优先级的分布情况: ...
分类:
Web程序 时间:
2020-03-30 16:02:49
阅读次数:
85
GRID属性(设为网格布局) display:grid; display:inline-grid; 容器(父元素): 网格布局 grid-template-rows:; (单位:px/%/fr, auto) grid-template-columns:; 重复行列 grid-template-row ...
分类:
其他好文 时间:
2020-03-26 19:22:40
阅读次数:
91
文本属性 一、设置文字大小 属性:font-size 文字的单位:px :像素 pt:磅,一般用在印刷领域 em:相对大小,相对于父元素的字体大小。 em的应用:由于em的字体大小是相对于父元素而言的,所以em可以用来设置首行缩进等,在父元素大小进行改变时,段落仍然缩进2个字符。 说明:1、浏览器默 ...
分类:
Web程序 时间:
2020-03-15 22:28:23
阅读次数:
102
px % em ( font-size的值就是 1em,如果自身没有设置font-size,则去找父元素的;常用于 text-indent:2em 来缩进两个字符 ) rem(html的font-size的大小,就是1rem ;rem是相对于根元素<html>,即rem继承的是html的font-s ...
分类:
移动开发 时间:
2020-03-14 22:06:05
阅读次数:
78
1.在项目中安装@angular-builders npm i -D @angular-builders/custom-webpack 2.在你的项目根目录创建 webpack.config.js 文件 (和angular.json 同级) module.exports = { module: { ...
分类:
Web程序 时间:
2020-03-05 15:09:33
阅读次数:
418
有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在写rem数值的时候,都需要对设计图原始的px值进行一番换算。 有没有工具可以辅助我们自动进行计算,我只要写px值就好了呢?当然是有的,编辑器其实就可以配置插件来对数值进行换算。但是有时候, ...
分类:
Web程序 时间:
2020-03-02 20:24:20
阅读次数:
258