移动端用rem使字体自适应

 rem是css3引入的新的单位,与px和em相对比,我感觉rem更加便利,尤其是对移动端的字体自适应布局。

 rem是根据HTML的字体大小进行设置的。

 而HTML的基本字体大小是16px,所以可以加入如下代码:

1 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

  这样设置的意思是将HTML的font-size设置为10px,方便计算。

  然后就可以可以使用rem作为单位了,将px换成rem是绝对可行的,如:

1 #div1{font-size: 1.4rem;}

  因为rem是根据HTML字体大小(10px)来设置的,所以1.4rem即是14px。

  但是注意,这样直接设置固定大小在移动端并不适用……不信可以试试。

  但是使用百分比就可以,如:

1 #div1{font-size: 140%rem;}

 nuu,这样就可以自适应了。

时间: 2024-11-06 17:53:43

移动端用rem使字体自适应的相关文章

移动端网页 rem 自适应布局

(function(doc , win){var DocElement = doc.documentElement;var RsizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';function ResetSize(){var deviceWidth = DocElement.clientWidth;if(!deviceWidth){return false;}DocElement.style.fo

移动端布局rem em

1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初始字体大小 优缺点:em就是为字体和行高而生的,有些时候子元素字体就应该相对于父元素,元素行高就应该相对于字体大小:而rem的有点在于统一的参考系 2.Rem布局原理 rem布局的本质是等比缩放,一般是基于宽度 3.比Rem更好的方案 vw -- 视口宽度的 1/100:vh -- 视口高度的 1/

Android手机在不同分辨率情况下字体自适应大小

两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size">30px</dimen>和 values-800x400/strings.xml 里面设置<dimen name="Text_size">30px</dimen> 分别代表480X320 和 800X400分辨率情况下 字号为30px

如何利用rem在移动端不同设备上让字体自适应大小

rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定.现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB. 事故造成原因:1.px单位在PC上很流行,在手机屏幕上一看,MLGB的,同样的12px却小的跟蚂蚁似的.2.好不容易在iPhone4上调的正常了,换个菊花牌手机,MBD不堪入目了.3.知道

移动端通过js来用rem控制字体大小的用法

通过js来控制页面字体大小,直接上代码: (function() { var rootHtml = $(":root"); var rootResize = function() { var fontSize = $(window).width() < 640 ? $(window).width() / 16 : 40; rootHtml.css("font-size", fontSize); } rootResize(); $(window).resize(

原生js移动端字体自适应方案

自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: 1 (function(doc, win) { 2 var docEl = doc.documentElement, 3 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 4 recalc = function() { 5 va

移动页面100%自适应,媒体查询 - REM单位字体设置

/* 媒体查询 - 字体设置 */ /* 平滑过渡 */ html{ -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; } /* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */ @media screen and (max-width: 1280px) { html{ font-size: 20

手机自适应的单位rem,与自适应网页的区别

一个网站有的会分为pc站和移动站,有的网站只有pc站,而现在更多的是自适应的站点.现在针对自适应的网页设计有很多模板,如bootstrap,它会让你轻松定制一个只适应网站,而现在大多数的网站并不是靠程序员凭空开发的前端与后端,都会运用已经成熟的框架创建自己的网站,如一些集成很好的wordpress框架,和织梦dede等.自适应的页面,只需要监测不同的屏幕尺寸,使用@media(),写出不同尺寸下的不同尺寸即可. 而现在更多的人使用手机,这就使网页的用户体验度更好,很多大公司都会采用pc站和移动站

[转]移动端web页面使用字体的思考

一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题. 前人已栽树,后人我就直接转来吧…… 回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,后来发到线上后,细心的产品经理发现页面的字体不是微软雅黑,要求马上修改,我就惊呆了,还跟产品争执一番. 后来了解到的手机系统 ios.android 等是不支持微软雅黑字体,为了满足