`

第20章 CSS3前缀和rem

 
阅读更多

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3前缀和rem</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>我是标题<em>小标题</em></h1>

<p>我是段落,我是<code>代码</code></p>

<!-- <div>我是HTML5</div> -->

</body>
</html>

 

style.css

@charset "utf-8";

html {
	font-size: 62.5%;
}

h1 {
	font-size: 3em; 
}


p {
	font-size: 1.4em;
}

/*code {
	font-size: 1.1em;		这里是15px,因为em是和父元素挂钩,所以,是14px的1.1倍,就是15px左右
}*/

/*code {
	font-size: 0.786em;		这里是11px;但计算太复杂
}*/

code {
	font-size: 1.1rem;		/*和根挂钩的1.1倍,就是11px*/
}

div {
	width: 200px;
	height: 200px;
	background-color: silver;

	/*border-radius: 50px;*/

	/*-webkit-border-radius: 50px;*/		/*这句为了兼容早期实验阶段的border-radius*/
	/*-moz-border-radius: 50px;*/			/*这句同上,但新版本Firefox已经剔除了前缀的写法*/


	/*为了将来现在或将来标准化的新版本浏览器兼容*/
	border-radius: 50px;
	/*-webkit-border-radius: 100px;*/
	/*把前缀写在前面,标准写法写在最后面*/
}

 

 

 

 

3
2
分享到:
评论

相关推荐

    第20章 CSS3前缀和rem.pdf

    在本章《第20章 CSS3前缀和rem.pdf》中,学习内容主要分为两个部分:一是CSS3前缀的应用与演进,二是CSS3中引入的新的长度单位rem。 首先来看CSS3前缀部分,这一部分主要介绍了在CSS3中为了解决兼容性问题而引入的...

    vue-cli3 + vant + postcss-px2rem实现移动端页面.docx

    vue-cli3 + vant + postcss-px2rem实现移动端页面

    前端开源库-postcss-px2rem

    通过使用PostCSS插件,开发者可以轻松地实现诸如自动添加浏览器前缀、转换新的CSS语法、优化和压缩CSS等任务。PostCSS 的强大之处在于它的可扩展性,开发者可以根据项目需求编写自己的插件,或者利用社区已有的插件...

    CSS3 px 和 em 和 rem

    本文将深入探讨CSS3中的单位px、em和rem,它们都是用来定义元素尺寸的重要工具,但各有其特点和应用场景。 首先,我们要理解像素(px)单位。像素是屏幕上的最小显示单位,通常用于创建精确的布局。当你设置一个...

    使用postcss-px2rem插件把px转变为rem,并配合给html根元素设置fontsize,来实现页面的自适应效果

    `postcss-px2rem`是一个PostCSS插件,它的主要任务就是自动将CSS文件中的`px`单位转换为`rem`。PostCSS是一个工具,它可以解析、修改、然后生成CSS,允许开发者使用未来CSS语法,或者像`px2rem`这样的自定义转换。在...

    vue3.0中使用postcss-pxtorem的具体方法

    在Vue 3.0框架中,使用`postcss-pxtorem`是一个有效的方法,可以帮助开发者将CSS中的像素单位(px)转换为相对单位(rem),从而实现响应式布局,特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件,它的...

    自适应rem的css文件

    在前端开发中,实现网页的自适应布局是至关重要...总结来说,`自适应rem的css文件`是前端开发中实现响应式布局的重要工具,通过合理使用rem单位和媒体查询,我们可以轻松地创建出适应各种设备的美观且功能强大的网页。

    postcss-pxtorem移动端适配的实现

    执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下,文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android &gt;...

    vantUI css文件H5自适应REM处理项目

    总结来说,这个项目是利用 vantUI 和 REM 单位,通过 PostCSS 和 Vue CLI 等工具,创建一个自适应的 H5 页面。它展示了现代前端开发中的响应式设计和自动化构建流程,是学习移动端适配和组件库应用的良好示例。通过...

    关于vue利用postcss-pxtorem进行移动端适配的问题

    刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了。稍微坐下总结: 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而...

    postcss-pxtorem:使用PostCSS将像素单位转换为rem(根em)单位

    postcss-pxtorem 的插件,可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...

    postcss-pxtorem:px转rem,基于postcss

    postcss-pxtorem 移动端px to rem 例如设计师给出640px的设计稿,写css样式的时候,就按照640px切图,单位px。 完工后,js或者css媒体查询,设定1rem的值。例如1rem == 40px。那么我们只 需要把css文件里面的px换算...

    sublime cssrem-master插件

    sublime cssrem-master插件使用

    详解CSS3 rem(设置字体大小) 教程

    css3新增了相对单位 rem ,使用rem同em一样皆为相对字体大小单位,不同的是rem相对的是HTML根元素。鉴于很多网友提到了rem,所以我这里就对其中一个总结。 在Web中使用什么单位来定义页面的字体大小,至今天为止都还...

    Gan_Rem.min.css

    索性就以750最大,320最小的分辨率手写了一套CSS,根据根元素REM的大小在设计图的时候就给他font-size:100px;然后所有的字体以及盒子都给他一设计图的大小除以100就得出了他的rem适配大小,可能写的不是很好,希望...

    CSS px,rem关系转换换算

    懒人推动进步,简化px,em,rem的换算

    Vue中rem与postcss-pxtorem的应用详解

    主要介绍了Vue中rem与postcss-pxtorem的应用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    李炎恢HTML_CSS教程.pdf

    * CSS3前缀和rem:CSS3新特性、rem单位 * CSS3文本效果:文本阴影、文本描边、文本装饰 * CSS3边框图片效果:border-image、border-radius * CSS3变形效果:transform、transition * CSS3过渡效果:transition、...

Global site tag (gtag.js) - Google Analytics