首页 > TAG信息列表 > 16px

rem方案原理、rem的具体用法

一 rem方案原理 将每个不同屏幕划分相同的等分，让同一个元素占有相同的比例 例如： 屏幕为500px,分为10份，那么一份是1rem=50px； 屏幕为1000px,分为10份，那么一份是1rem=100px 　二 用法 在浏览器中默认的字体高度是16px，默认是1em=16px；16*62.5%=10px； // EM 1em是相对自身而言的，会

16px的宋体和微软雅黑的对比

16px 左右对比，很明显，小号字体（16px及以下），点阵字体具有明显的优势——清晰度高。 左右对比，很明显，小号字体（16px及以下），点阵字体具有明显的优势——清晰度高。 14px 左右对比，很明显，小号字体（16px及以下），点阵字体具有明显的优势——清晰度高。 左右对比，很明显，小号字体（16px及以下），点阵字体具

element二次封装icon

<template> <i class="image-icon" :class="`image-icon-${icon}`" :style="iconStyle"></i> </template> <script> export default { props: { icon: { type: String, required: true,

常用封装

1.边框 边框涉及1物理像素的问题，需要根据媒体查询进行相应的配置 .border-bottom{ position: relative; } @media screen and (-webkit-device-pixel-ratio:1){ .border-bottom::after{ position: absolute;

css 关键的一些点

首行缩进：text-indent:2em （em：相对当前文字像素大小 默认为16px 1em=16px 2em=32px）background-color:transparent （透明颜色） transform-origin: right bottom; 改变旋转中心点transform-style:preserve-3d 设定3D样式，必须写在父级 @keyframes change{} 定义动画属性animation:动

【placehlder修改css样式】

文章目录 一、placehlder修改css样式 一、placehlder修改css样式 ::-webkit-input-placeholder { color: #999; font-size: 16px; } :-ms-input-placeholder { color: #999; font-size: 16px; } ::placeholder { color: #999; font-size: 16px; }

10-CSS字体属性之字体大小

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

Vue3学习（三）之网站首页布局开发

一、前言 上篇文章已经提到集成Ant Design Vue后，和Element Ui一样，还是组件的使用，然后就是复制粘贴改了。 二、实际案例 先搞个布局布局看看，也就是我们说的layout，如下图： 不在home中修改，因为什么，每个页面都有头部和底部，写起来较麻烦，而变化动态的部分放在Home里面维护即可。 1、修改

打造自适应网站只用一个 CSS 属性就够了

用一个css属性创建一个响应式网站，让我们来看看它是如何做到的。以这个模板为例，没有应用css属性。 使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。 现在添加魔术CSS clamp(minimum, preferred, maximum); 在这里！你已经完成了 http://www.ssnd.com.cn 化妆品OE

使用相对长度单位rem布局网页内容

前言：上篇我们提到了相对单位em的用法，知道了em的概念，即是一个相对的单位，也知道了em的值不是固定的，p标签里的em和p里面的div下面的1em的px值并不是一样的。具体是多少呢？那就得看一下父级元素的值了，本级元素的px值随着父级元素的变化而变化的，“进制”是浏览器的默认值（16px）;和em对

使用相对长度单位em布局网页内容

顺便问一下哈？那个辣椒酱大家感觉怎么样，你们也买了也尝了，是不是该反馈反馈啦~~如果还有想要的，可以联系我呐！ 原文地址：自从有了这款辣椒酱，拌饭再也不用老干妈 前言：在页面开发中，页面元素的尺寸大小和页面的字体大小都是我们不可忽略的内容，一个美观大方、层次分明的页面会让人看起来

前端朔源：像素

设备需要适配多屏幕进行开发，第一个问题初始化像素。像素分为两种： 1. 当前显示设备的物理像素分辨率 单位 pt 2. CSS像素分辨率 单位 px 3. 设备独立像素：随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这

font

■ 定义 font属性用于定义文字的复合属性 ■ 使用说明 通过复合属性，可以更节约代码 font属性值必须按照以下语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 font: font-style font-weight font-size/line-height font-family; 不需要设置的属性可以省略(取默认值)，但

css3 实现圆角的三角形

达到的效果： 今天碰到这样一个需求，为带有圆角的框加一个角标。而且角标是圆角的。我真的不想切图，怎么办。突然想到css3可以实现条纹背景，那这不就可以了么 background: linear-gradient(45deg, transparent 50%, #61C4CF 0%); background-size: 16px 16px; border-top-right-radiu

H5与IOS交互常见问题

IOS内嵌H5软键盘收回页面底部空白不回滚的bug $("input,select,textarea").blur(function(){ setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollH

VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列

接下来几篇作文，会介绍用到的输入框系列，今天会介绍组普通的调用方式，因为RXEditor要求复杂的输入功能，后面的例子会用VUE的component动态调用，就没有今天的这么直观了，控件的实现原理都一样，只是调用方式的区别，今天的例子的调用代码为了写作文特殊制作的，写完作文还要恢复回去。开关控件（S

移动端适配问题

  现在开始练习移动端的开发.在开发过程中发现了一些问题,那就是移动端适配.看了一些文章也渐渐 了解到了是怎么回事.网上关于这方面的文章已经很高质量了,摘抄下来理解就好.   有一个概念就是像素比的问题.手机物理尺寸那么小,但是分辨率几乎有超越电脑之势.这就带来了一个问

外圆角选项卡

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .tab-x { display: flex; flex-directi

javascript实现网页分享至朋友圈功能

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 #WX { 9 width: 231px;10

bootstrap笔记

8. rem的使用方法： 首先，先说一个常识，浏览器的默认字体高都是16px。 兼容性： 目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。 就算浏览器不支持，就多写一个绝对单位的声明。这时不支持的浏览器会忽略用rem设定的字体大小，选择绝对单位字体的大小。 使用%单位方便使

如何把设计稿中px值转化为想要的rem值

  首先我们需要的是把尺寸转化为rem值   假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750;   第一步.  把图片分为若干份(好算即可),每一份的大小就是rem的单位 这里举例为  640/20 = 32rem   第二步. 把设计图测量出来的尺寸 转化为rem值  200/20 =

小猿圈之前端css下拉菜单详解

刚学习前端的小伙伴或许对下拉菜单css怎么设置不太了解，小猿圈加加今天对css下拉菜单做一个详细的解释，感兴趣的同学可以学习一下，这是前端的基础。 先用一段代码说明一下： .dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; p

前端开发入门到实战：CSS中字体单位：px、em、rem和%

对于绘图和印刷而言，“单位”相当重要，然而在网页排版里，单位也是同样具有重要性，在CSS3普及以来，更支持了一些方便好用的单位（px、em、rem…等），这篇文章将整理这些常用的CSS单位，也帮助自己未来在使用上能更加得心应手。 “网页”和“印刷”的单位若要把单位做区隔，最简单可以分为“网页”

弹性盒子 Flex 子元素高度塌陷

数据来源：https://blog.csdn.net/sinat_36539161/article/details/81663971   先看看页面整体布局：· wrap 弹性布局，分 head、main；· head 弹性布局，分 h2、i ；问题：head 高度塌陷。高 32px，变成：24.03px（PS里：chrome是23px，IE是24px）。 <!DOCTYPE html> <html lang="en"> <head> &l