font-size | 易学教程

屏幕适配

阅读更多关于屏幕适配

通过js控制根目录font-size，从而做到屏幕适配。 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); /*DOMContentLoaded文档加载完成不包含图片资源 onload包含图片资源*/ })(document, window); /

CSS中line-height

阅读更多关于 CSS中line-height

line-height基本概念：行高：是指文本行基线间的垂直距离，基线不是汉字文字的下端沿，是英文字母“x”的下端沿，上行的底线和下一行顶线之间的距离就是行距。从上图（借用他人的图）可以看出，行距、font-size与line-height之间的关系： line-height==font-size时，行距为0； line-height>font-size时，行距为line-height减font-size，是个正数，也就是2行会有空隙； line-height<font-size时，行距为line-height减font-size，是个负数，2行就会重叠； line-height值 normal（默认）：设置合理的行间距； number 设置数字：此数字会与当前的字体尺寸相乘来设置行间距； length：设置固定的行间距； %：基于当前字体尺寸的百分比行间距； inherit：规定应该从父元素继承 line-height 属性的值。两行之间的距离：可以通过padding来控制（word中1.5倍间距就是2行之间距离大小等于汉字大小乘以1.5）来源： CSDN 作者：水果妹妹踩前端的坑链接： https://blog.csdn.net/Imagirl1/article/details/103909053

html/css-仿写百度搜索首页

阅读更多关于 html/css-仿写百度搜索首页

html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="baibuA.css"> </head> <body> <div class="content"> <div class="top"> <ul> <li><a href="#"class="a1">新闻</a></li> <li><a href="#"class="a1">hao123</a></li> <li><a href="#"class="a1">地图</a></li> <li><a href="#"class="a1">视频</a></li> <li><a href="#"class="a1">贴吧</a></li> <li><a href="#"class="a1">学术</a></li> <li><a href="#">登录</a></li> <li><a href="#">设置</a></li> <li><a href="#" class="more">更多产品</a></li> </ul> </div> <div class="middle"> <img src="images/百度.gif" alt="" class=

一步步教你使用rem适配不同屏幕的移动设备

阅读更多关于一步步教你使用rem适配不同屏幕的移动设备

1.先说说几个前端常用的几个单位的概论： 1、px (pixel ，像素 ) ：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。 2、em( 相对长度单位，相对于当前对象内文本的字体尺寸 ) ：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。 3、pt (point ，磅 ) ：是一个物理长度单位，指的是72分之一英寸。 pt=1/72( 英寸 ), px=1/dpi( 英寸 ) 4、rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。 2

03.移动web-开发准备

阅读更多关于 03.移动web-开发准备

1.技术选型方案：我们采取单独制作移动页面方案技术：布局采取rem适配布局（less+rem+媒体查询）设计图：750px设计尺寸 2.搭建相关文件夹结构 css/images/upload/index.html 3.设置视口标签\引入初始化样式 <meta name="viewport" content="width=device-width, initial-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"> 4.设置公共common.less文件 1.新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要 2.尺寸320px.360px,375px,384px,400px,414px,424px,480px,540px,720px,750px 3.划分15等分 4.pc端也可以打开，so html设置字体大小为50px //设置常见的屏幕尺寸。修改里面的html文字大小 //划分为15em @number:15; //320 @media screen and (min-width:320px){ html{ font-size: 320px / @number; } } //360 @media screen and (min

WPF automatic resize font until it fits within parent control

阅读更多关于 WPF automatic resize font until it fits within parent control

问题 I have a user control who's root element is a Grid. I also have have a ContentControl that serves as a placeholder for some text that is filled when data is loaded. This control can be moved around within the user control and so it's position can be anywhere. If the text is too long to fit within the root Grid of the user control, I want to reduce the font size of the ContentControl until the text fits. My problem is that I can't seem to find an event that I can handle to do this process. I

WPF automatic resize font until it fits within parent control

阅读更多关于 WPF automatic resize font until it fits within parent control

html和css面试总结

阅读更多关于 html和css面试总结

html和css w3c 规范结构化标准语言样式标准语言行为标准语言 1）盒模型常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2）css3 新特性常问： word-wrap 文字换行 text-overflow 超过指定容器的边界时如何显示 text-decoration 文字渲染 text-shadow文字阴影 gradient渐变效果 transition过渡效果 transition-duration：过渡的持续时间 transform拉伸，压缩，旋转，偏移等变换 animation动画 audio音频 vadio视频 RGBA和透明度 css3 边框 border-radius 圆角 box-shadow 盒子阴影 border-image 边框图片 css3 背景 background-image 背景图片 background-size 背景大小 background-origin 背景图像的位置区域 background-clip

How to change the default font size in the Swing GTK LookAndFeel?

阅读更多关于 How to change the default font size in the Swing GTK LookAndFeel?

问题 Is there a way to change the default font size in the Swing GTK LaF? The GTK LaF seems to assume 72dpi, so all the fonts are only 3/4 of the size they should be when using a 96dpi screen. See this Fedora bug for details. I'd like to find a workaround in the meantime, while I wait for the fix. I've already tried resetting the font size via UIDefaults , as recommended here, for example, but (as also noted there) the GTK LaF appears to ignore this. I could build a widget factory that would also

网页字体适配方案

阅读更多关于网页字体适配方案

微信安卓版 7.0.10 版本起，网页的字体大小会跟随微信全局设置里的字体大小。若用户设置了较大字体后，可能导致网页的排版出现错乱，建议开发者做好较大字体的适配 document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: '2' }); }, false); 此外，若页面是用 rem 单位进行排版的（目前该做法更容易导致页面不可用），可以反向重置 font-size 的数值达到还原字体标准大小的目的。代码示例如下： // 以下代码思路来源网络。同时尽量将代码放在 body 标签开头位置 var $dom = document.createElement('div'); $dom.style = 'font-size: 10px;'; document.body.appendChild($dom; // 计算出放大后的字体 var scaledFontSize = parseInt(windowgetComputedStyle($dom, null.getPropertyValue('fontsize')); document.body.removeChild($dom; // 计算原字体和放大后字体的比例

订阅 font-size