font-size

一、前言 根据前面写的 你不知道的CSS单位，进行了一种响应式布局的思考。 视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！ 二、正文 1、vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配） <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2、rem布局-解决字体适配（此布局在weex中无法识别） rem布局原理：根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。 @media only screen and (max-width: 1600px) and (min-width: 1280px){ html{ font-size: 14px; } } @media only screen and (max-width: 1280px) and (min-width: 960px){ html{ font-size: 12px; } } @media only screen and (max-width: 960px){ html{ font-size: 10px; } } 3、vw、vh、rem的使用 <template> <div class="box"> </div> <

一、背景 　　最近在自己博客园逛的时候，总会有一个感觉，真是太丑了，然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统，上网一搜才发现，原来我们可以自定义博客的布局以及样式的，那我就在网上找到了一个哥们的自定义Hexo经典主题Ligt的CSS文件，然后根据自己的审美及需要来做改动后上传以此来使自己的博客看起来像是自己搭建的个人博客。因为我总觉得一个良好的界面才会给博友读下去的欲望，否则很恶心，连自己都这么觉得。下面我们就来分享这个替换步骤教程。 二、实现步骤以及实现原理 1.先copy经过我改良过的博客CSS样式（手机和PC响应式布局） 1 @font-face { 2 font-family: 'FontAwesome'; 3 font-style: normal; 4 font-weight: normal; 5 src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font

I have a grid with 2 columns and 2 rows. A single character (Unicode U+2699) was placed inside the bottom right grid field. It looks like this: I´d like the character to automatically adjust its font size to fit the grid field it has been placed in (in this case it should be bound to the height of the second grid row, but since in some cases it could be unclear if the height or the width of the grid is smaller, it would be also nice to know how to bind to the lowest of those 2 values). My implementation so far is something like the following (I simplified it a bit for this example): <Grid>

My font size is 12dp. I'm setting the font using TextPaint , since I'm using a span. The problem is the parameter that TextPaint accepts is in float. I'm wondering how can I convert 12 dp to float? SleepyTonic From android.content.res.Resources.getDimension(int id): float twelveDp = TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 12, mContext.getResources().getDisplayMetrics() ); Sachin Suthar Try this: public static float dipToPixels(Context context, float dipValue){ DisplayMetrics metrics = context.getResources().getDisplayMetrics(); return TypedValue.applyDimension(TypedValue

本章主要分为以下几个部分 正确理解响应式设计 响应式设计的步骤 响应式设计需要注意的问题 响应式网页布局实现原理第一：正确理解响应式布局 什么是响应式布局？ 　　响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。 　　 换句话说，根据屏幕分辨率不同，做出相同视觉效果。 响应式设计的步骤 　　1.编写非响应式代码 　　2.加工成响应式代码 　　3.响应式细节处理 　　4.完成响应式开发 1.布局及设置meta标签 　　当创建一个响应式网站，或者非响应式网站变成响应式的时候，首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局，页面固定宽度大小，我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询（Media Query)和响应式代码。这种操作更容易实现响应式特性。 　　当你完成当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1

简易年历 1 <style type="text/css"> 2 * { padding: 0; margin: 0; } 3 li { list-style: none; } 4 body { background: #f6f9fc; font-family: arial; } 5 6 .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; } 7 .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; } 8 .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; } 9 .calendar li h2 { font-size: 20px; padding-top: 5px; } 10 .calendar li p { font-size: 14px; } 11 12

一、首先介绍一下px px就是css中最基本的长度单位了，用px做单位基本上没什么问题，可以做到让页面按套路精确的展现 px是相对于显示器分辨而言的 如果全篇用px布局会暗藏一个蛋疼的问题，就是当用户用ctrl滚页面的时侯(说白了就是ctrl+,ctrl-)，你会发现页面结构产生了不可预知的错乱，因此有砖家倡导使用em替代px.... 二、接下来介绍一下em 如果你从上到下阅读批文，你应该已经知道了em出现的原因，下面说说em的特性，简单的讲px是绝对单位，1px就是1px，2px就是2px，以此类推，而em是相对单位，em是相对的基准点就是浏览器的字体大小，浏览器默认字体大小是16px,也就是1em默认等于16px,如果你想给某个文字设定为14px，就这样写font-size:0.875em;样式表都用em来写的话，就可以解决ctrl+,ctrl-时造成的页面错乱问题。 这时侯有人就会抱怨了，数学是体育老师教育的，除以16我怎么可能算明白，那好办，你可以在根节点上重定义基准号html{font-size:62.5%},此时页面基准字号就是16px*62.5% = 10px,那么此时1em=10px,那么些时14px = 1.4em依此类推 但是,问题又来了，em准确的说是相对于父节点的字号来计算的，如果自身定义了字号那么就相对自身字号来计算，举例如下: html { font

1、先观察关系的转换（ http://pxtoem.com/） em优缺点 1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 所以我们在写CSS的时候， 需要注意两点： 1. body选择器中声明Font-size=62.5%； 2. 将你的原来的px数值除以10，然后换上em作为单位； 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。 rem特点 rem是 CSS3 新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是 一个例子： p { font - size :