响应式－字体运用rem

<!doctype html>
<html>
<head>
    <title>aaa</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <style type="text/css">
        html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
        body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
        p.bb {
                font-size: 1.5rem;/*1.5 × 10px = 15px*/
                line-height:2em;/*基于字体大小的两倍高度 2*15=30px**/
             }
        p.aa { font-size: 15px;/*15px*/}
    </style>
</head>
<body>
你好啊
<p class="bb">你好啊nnn</p>
<p class="aa">你好啊nnn</p>
</body>
</html>

font-size rem 相比10px

line-height:2em 相比当前元素字体高度2倍

时间： 2024-11-10 11:05:06

响应式－字体运用rem的相关文章

响应式网页设计:rem设置网页字体大小自适应

首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯,而且在设计师的手里,文字在网页中的排版承载着一种艺术的直觉. 网页中常用的文字大小单位是

Web移动端页面 --响应式和动态REM

鄙人最近才刚刚开始学习一些关于移动端的知识,还只是个小白,文中可能有许多理解错误,望指出,请多多见谅. 响应式什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向找一份设计图使用Media Query 隐藏元素添加meta viewport 明白手机端交互方式的区别 Media Query 是什么 Media query 翻译过来就是媒介查询,媒介就是我们查看这个网页的设备. 媒介查询源于CSS

九、响应式发：rem和less（适配移动端）

一.响应式开发响应式开发优先适配移动端又兼容到pc端官网:https://less.bootcss.com/usage/ 教程:https://www.w3cschool.cn/less/ rem和em:https://blog.csdn.net/u010132177/article/details/103725945 参考:https://www.jianshu.com/p/58a061c6e9af 1.1安装less依赖 cnpm install less less-loader --s

响应式字体(js控制)

window.onload=function(x){if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {}, false);};function w(){var a=r.getBoundingClientRect().width;a>750&&(a=750*v),x.rem=a/15,r.style.fontSize=x.rem+"px&

CSS响应式字体，自适应视图窗口大小

这似乎是一个新的字体大小单位 Viewport-Percentage Lengths. 一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示.你可以通过vmin和vmax设置最大最小值. 1vw = 当前视图窗口(viewport)1%的宽度 1vh = 当前视图窗口(viewport)1%的高度 1vmin = 1vw 或 1vh, 取决于哪个更小一点 1vmax = 1vw 或 1vh, 取决于哪个更大一点样式中直接:width:1vw; 参考:http://

移动端响应式布局，rem动态更新

(function(){ var fontSizeMatchDeviceWidth = function(){ var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320, devicePixelRatio = window.devicePixelRatio || 1, fontSize = (Math.ceil(deviceWidth * 16 / 320)), scale = 1 /

用rem来做响应式开发

由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧. Demo 由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果.基本上在不同分辨率下都是差不多的展

用rem来做响应式开发(转)

由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧. 由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果.基本上在不同分辨率下都是差不多的展示效果,而

html5 响应式布局

响应式布局第一:正确理解响应式布局响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤响应式设计的步骤就是1.编

到底什么是响应式布局

做移动端的前端,接到的需求中肯定离不开响应式布局,那么到底什么是响应式布局,其实现的原理在哪,我个人的看法如下: 1.目的:在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够适配多个终端 2.由于响应式布局多是针对移动端,所以首先要在<head>标签中添加下面这行代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, use