font-size | 易学教程

用rem适配移动端

阅读更多关于用rem适配移动端

常见方式： 1. 固定宽度(320)做法：这样前端倒是爽了，可是大页面两边有留白，小页面图标文字又会缩的很小，用户体验极其不好。 2. 流式布局：其实就是用%，这样宽度倒还差不多，高度怎么搞？所以这种布局一般都是宽度自适应高度写死，显的很不协调，另外对设计也有很大的限制，另外还有兼容性方面的问题。 3. 响应式布局：说白了就是利用CSS3中的Media Query（媒介查询），喊的很火，谁用谁知道，简直累死人不要命。 4. 设置viewport进行缩放：以320 宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了。<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> 5. 利用vh、vw适配：兼容性太差。 rem是什么 rem是一个相对根元素html字体大小的单位，所以它的大小是由html的fontSize大小决定的，假如我把html的fontSize设置为10px，此时的1rem就等于10px，假如我把html的fontSize设置为100px，此时的1rem就等于100px，这也正是我们能用rem做移动端适配的根本原因，就是通过不同屏幕下改变根元素fontSize的大小

How to get consistent line-heights between browsers

阅读更多关于 How to get consistent line-heights between browsers

问题 This question is basically an extension of this one about an issue I was having with vertical centering. Finding the answer to that question created a need for this question. Have a look at this JSFiddle. It sets up a container to be 60px tall. .container { background-color: lightgreen; height: 60px; max-height: 60px; line-height: 60px; font-size: 60px; } In Firefox, it is 60px tall in all cases. In Chrome, the text height is actually taller than 60px (sometimes 69px , sometimes other values)

change First letter of word font size with javascript/jquery

阅读更多关于 change First letter of word font size with javascript/jquery

问题 Is there a way to select the first letter of each word with either javascript or jQuery? Im trying to make tags on my page have the first letter of each word be a bigger font size. Im assuming it involves regular expressions but all i keep finding are things for form validation. I also see a bunch of stuff for capitalizing the first word. I'm trying to change the font size. Does anyone know if this can be done and how? Thanks. 回答1: If you are just looking for a styling change, you might be

02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗？

阅读更多关于 02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗？

1：废话不多说，直接看如下图表： 2：px就不过多介绍了，就是像素点的大小，加入您的屏幕分辨率为1920，则每一个相当于每一个有横着的1920个像素点； 3：em 为相对单位，一般以 body 内的 font-size 为基准进行定义，默认值 1em = 16px，假如说我们想使用 “1em” = “10px” 来取代默认值 “1em” = “16px”，应写如下代码： body { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 2.4em; /*2.4em × 10 = 24px */ } ul{ 　　font-size: 125%; /* 基准变成了20px */ } li { 　　font-size: 1.4em; /*1.4 × ? = 14px ? */ } 但是问题来了，由于 “em” 是相对于父级元素讲的，所以加入 ul 不定义基准大小，则下面的 li 将级成原本的默认值 “1em” = “16px”，但是这样换算单位会很麻烦，但是每一个父级元素你都设置基准大小，平白地增加了无穷的代码编辑烦恼，这该怎么办呢？ 4：结合上面种种情况，rem 应运而生！！！在 W3C官网上是这样描述 rem 的—— “font size of the root element” 。即当设置了 html{

前端自适应布局初探（更简单地理解em rem vw vh的使用）~

阅读更多关于前端自适应布局初探（更简单地理解em rem vw vh的使用）~

第一次发博客，作个纪念。　　自适应的布局，当我们调整浏览器大小的时候，咱们写的这个网页内容也随着浏览器大小进行改变，当我们使用不同分辨率的电脑屏幕打开时候，网页内容也能保持最初的一个排版，元素按屏幕比例进行了缩放。　　em:都说这是一个相对的字体尺寸。怎么理解这个相对呢？这个相对：这个是一个可变的尺寸，是由font-size决定的。举个栗子：一个div元素。不给它设置font-size 那么这个div使用em单位。设置：width:10em height:10em 那么你在浏览器上面观察到的尺寸宽高都是160px; 那么这个1:16是怎么来的？？！！是因为浏览器字体默认大小font-size为16px ！！那么假设我们给它一个值：font-size:12px; width:10em;height:10em; 你再去网页看，就会发觉这个元素的宽高为120px,em:px的比例就会变成1:12:； so 你设置的font-size就是em的比例值。注意点1 ：浏览器有默认字体范围，例如谷歌最小的字体为12px 那么在谷歌浏览器上面。使用em缩放，font-size最小就到12px，即使再小，这个值也不会发生改变。注意点2 ：每个元素都具有一个font-size,所以每个元素的大小都是根据它自身的这个fons-size进行改变的。建议：动手试一试。你会发觉很简单。

CSS3自适应字体大小(vw vh)

阅读更多关于 CSS3自适应字体大小(vw vh)

viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ DEMO地址： http://qianduannotes.sinaapp.com/test/fontResize.html （已经用JS修正重绘bug） <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <style type="text/css"> #box { font-size: 4vw;} </style> </head> <body> <div id="box"> 我是靖鸣君我是靖鸣君我是靖鸣君 </div> </body> </html> 但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文字并没有按照应有的比例变化，但是css3标准中是这么说的： When the height or

[翻译]使用VH和VW实现真正的流体排版

阅读更多关于 [翻译]使用VH和VW实现真正的流体排版

前言不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在。这是因为，在印刷上，尺寸大小都是有固定的，不用考虑在页面上使用。我认为流体排版技术可以和网页很好的匹配。这是在不同媒介上的一种解决方法。并不意味着我们要推翻之前的所有关于排版的认识，只需要去学习如何用不同方式，去运用掌握新的技术。只要注意细节，就可以制作出适配所有屏幕尺寸的完美的页面。流体排版上手视口（viewport）单位，使流体排版在页面上应用变为可能。视口单位是根据浏览器的视口尺寸的百分比来定义的。举个例子，1视口宽度（vw）等于视口宽度的1%，它不同于百分比的地方是，它的宽度是依赖于视口的宽度的，而百分比是元素的祖先元素来决定的。视口单位，不同于其它单位，它不依赖于基础字体的大小。这种差别很重要，使它变得有意义而且独特。可以使用的4种视口单位： vw :视口宽度(viewport width) vh :视口高度(viewport height) vmin :视口宽度或高度，选择小的那个 vmax :视口宽度或高度，选择大的那个使用流体排版最简单的方法

订单页面布局

阅读更多关于订单页面布局

html <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom-stripe" src="/images/order/sub/xiushi.png" /> <view class="line-one"> <view class="name"> 动感超人 </view> <view class="tel"> 185****9875 </view> </view> <view class="line-two"> 北京朝阳区四环到五环之间878东区12层 </view> </view> </view> <!-- <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom

font-size depending on character length?

阅读更多关于 font-size depending on character length?

问题 Is it possible to change the div's font-size depending on how many characters are in it? I have image album titles in small fixed width div's (100px). Sometimes the album names have too many characters that they force a new line. So I was wondering if it is possible to re-size the font to keep the title on one line? 回答1: Yes, by assigning a variable to a class: In your css: .longstring { font-size: 10pt; } .shortstring { font-size: 14pt; } In your view <?php $random_number = '42'; if(strlen(

font-size depending on character length?

阅读更多关于 font-size depending on character length?

订阅 font-size