font-size

移动端适配js

由 喜夏-厌秋 提交于 2019-12-31 13:24:20
第一种、参考网易的 （我现在用这个多） https://www.cnblogs.com/well-nice/p/5509589.html 1 var deviceWidth = document.documentElement.clientWidth; 2 if(deviceWidth > 750) { deviceWidth = 750; } 3 document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'; 备注：body要加个样式：width:7.5rem 这是针对设计图为750的，如果是640，就/640 （1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度： 1 如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem 2 如果设计稿基于iphone4/5，横向分辨率为640，body的width为640 / 100 = 6.4rem （2）布局时，设计图标注的尺寸除以100得到css中的尺寸，比如下图： 播放器高度为210px，写样式的时候css应该这么写：height: 2.1rem。之所以取一个100作为参照，就是为了这里计算rem的方便！ （3）在dom ready以后，通过以下代码设置html的font-size: 1

从网易与淘宝的font-size思考前端设计稿与工作流

由 我怕爱的太早我们不能终老 提交于 2019-12-31 13:24:03
最近翻了一下关于移动端的rem的使用，怎样最方便。在读到 流云诸葛的一篇关于《 从网易与淘宝的font-size思考前端设计稿与工作流 》的文章后，来总结一下。 然而根据我以往做移动端web项目的时候，设计稿一般是640或者750的，我一般会在head里面这样写： <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 --> 做移动端活动的时候结构也一般这样： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以删除--> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title

Font size of text

由 ￣綄美尐妖づ 提交于 2019-12-31 07:25:14
问题 I have created different layouts (layout, layout-small, layout-normal, layout-large, layout-xlarge) and for values (values, values-ldpi, values-mdpi, values-nodpi, values-hdpi, values-xhdpi) . I have one activity in my app to show text. I have scroll on text. And I set the values of text size in values-mdpi . But when I run my app on emulator 3.2"QVGA(ADP2)(320 x 480:mdpi) scroll on text work. But when I run my app on emulator 5.1"WVGA(480 x 800:mdpi) all text on half screen and the size of

rem在响应式布局中的应用

由 蹲街弑〆低调 提交于 2019-12-30 15:08:12
rem/em/px/pt的基友关系 px 像素相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,根据其父元素来设置字体大小 pt point，是印刷行业常用单位，等于1/72英寸 rem CSS3新增的一个相对单位,是根据网页的跟元素（html）来设置字体大小 rem应用于适配 rem的特性同样适用于width和height，我们可以根据根元素的font-size值来改变元素的宽高值，由此我们应该可以联想到我们可以根据屏幕大小动态地给html设定不同的值，从而达到我们css样式中的适配效果。 rem的适配规则 1.选择基准 虽然我们所写出的页面要在不同的屏幕大小设备上运行，但是我们写页面的时候，必须要选择其中一种屏幕大小作为初始的基准，而这个基准的选择应该根据我们所拿到的视觉稿来决定， 2.rem数值计算 正常情况下rem的值默认为16px，这样在整个页面的css计算过程中太过繁琐。比如，现在有个30px宽度的元素，就得写成30/16rem。对于整个页面来说工作量还是挺大的。所以这里提供了俩种方法 可以将html的font-size设置成100px 这样设置，在写单位时直接将数值除以100在加上rem的单位就可以了。如果设计稿的字体是16px；我们就可以写成1.6rem。 这里为什么不用10？ 因为google等浏览器对最小字体有限制，即最小为12px

Emacs font sizing with Ctrl key and mouse scroll

由 牧云@^-^@ 提交于 2019-12-30 03:58:09
问题 notepad++ allow me to increase the font size when I hold the Ctrl Key and rotate the mouse middle scroll button to forward. In the same way, the when I hold Ctrl and rotate the mouse middle scroll button backward, the fond size reduces. How can I get the same with Emacs? 回答1: code for AlexCombas' answer: (defun font-big () (interactive) (set-face-attribute 'default nil :height (+ (face-attribute 'default :height) 10))) (defun font-small () (interactive) (set-face-attribute 'default nil

UILabel cuts off custom font. How do I dynamically adjust UILabel height based on custom font selected?

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-30 01:55:09
问题 Some of the custom fonts I've loaded onto my app are getting cut off when displayed in a UILabel. I have multiple custom fonts that I need to properly display. How can I fix this? 回答1: As stated, I had a very annoying problem where custom fonts in a UILabel would get cut off due to something . I later found out it was due to ascenders and descenders (font characteristics). After much searching I found a solution that required you to download a program, adjust the font's ascender and descender

CSS—相对单位em

由 我与影子孤独终老i 提交于 2019-12-29 11:48:32
目录 一、概述 二、详解 三、注意事项 一、概述 em是一个相对长度单位，它的单位长度取决于当前元素行内文本的字体尺寸，如当前元素行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度，故名em，现指字符宽度的倍数，用法类似百分比，如：0.8em、1.2em、2em等。 em可以设置width、height、line-height、margin、padding、border等样式。在响应式和移动设计的大环境下，使用em能更方便快捷的一次性调整Web文档及其html元素的字体大小、宽度、高度、边距、边框等一系列属性，一般来说使用em作为单位比px更灵活。 二、详解 浏览器中的文本字体尺寸一般默认为16px，即默认情况下： 1em = 16px div { width: 10em; height: 10em; background-color: red; /* 10em = 10 * 16 = 160px */ } 尝试改变字体尺寸，如下所示。 div { width: 10em; height: 10em; background-color: red; font-size: 20px; /* 10em = 10 * 20 = 200px */ } 三、注意事项 继承 元素的字体尺寸默认会继承父标签的字体尺寸。 <style> div { font-size:

PHP Accurate Font Width

由 纵然是瞬间 提交于 2019-12-29 09:30:11
问题 I am trying to generate a text image. So I create a new font: $font = '../fonts/Arial.ttf'; Then I add some background for the text imagefilledrectangle($image, 0, 0, ?, 12, $green); And add text imagettftext($image, 12, 0, 0, 12, $white, $font, $text); The problem is right now I don't know how to get the width of my font with size 12. Thanks. 回答1: Using ImageTTFBBox() 来源： https://stackoverflow.com/questions/1767588/php-accurate-font-width

Adjust font size depending on which font is used from a font stack

由 若如初见. 提交于 2019-12-29 08:36:29
问题 I'm using one of the new google api fonts for a heading on a site. It's Yannone Kaffeesatz and is quite a condensed typeface. My font stack is as follows: font-family: 'Yanone Kaffeesatz', arial, serif; This is fine when the Yannone Kaffeesatz font renders, but if it doesn't, Arial is much more open and the heading spans over two lines. My question is: Is it possible to use a different font-size depending on which font is rendered on the page? Ideally supported across a multitude of browsers.

Line-Height does not match the font-size

由 冷暖自知 提交于 2019-12-29 08:31:22
问题 When I have two line of text with different font-size, they overlap. Look at this example : http://jsfiddle.net/3WcMG/1/ All the 'j' and 'g' are hiding the to of the second line. It does that with all main fonts. Why Does it acts like that? What can I do to avoid that? EDIT: I know what's 'em' means, I know how to use the margins, I know how to increase the line height, I know what is the effect of the reset css of JSFiddle and that is not my question. My question is: Why the bottom of the 'j
订阅 font-size