响应字体大小(移动端)

大前提:1、initial-scale 为 1;2、在项目css中(注意不要被公共的base、common之类的影响了,资源加载顺序也是蛮重要的),先把html的fontSize设置为 100px(或者加上媒体查询代码), 避免加载未完成时候样式错乱;

html{fontSize:100px}
需要全屏的话加上CSS

html{height:100%;position:relative;}
body{margin:0 auto;height:100%;}

方法一

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + ‘px‘;
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

方法二

new function (){
            var _self =  this ;
            _self.width = 640; // 设置默认最大宽度
            _self.fontSize = 100; // 默认字体大小
            _self.widthProportion =  function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
            _self.changePage =  function (){
            document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
            }
            _self.changePage();
            window.addEventListener(‘resize‘, function (){_self.changePage();}, false );
        };

方法三

!(function(win, doc){
    function setFontSize() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        var winWidth =  window.innerWidth;

        doc.documentElement.style.fontSize = (winWidth / 640) * 100 + ‘px‘ ;
    }

    var evt = ‘onorientationchange‘ in win ? ‘orientationchange‘ : ‘resize‘;

    var timer = null;

    win.addEventListener(evt, function () {
        clearTimeout(timer);

        timer = setTimeout(setFontSize, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);

            timer = setTimeout(setFontSize, 300);
        }
    }, false);

    // 初始化
    setFontSize();

}(window, document))

方法四(媒体查询)

换算rem工具(https://offroadcode.com/prototypes/rem-calculator/

@charset "UTF-8";
/* 320px布局 */
html {
  font-size: 100px; }

body {
  font-size: 0.14rem; }

/* iphone 6 */
@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  html {
    font-size: 117.1875px; } }

/* iphone6 plus */
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  html {
    font-size: 129.375px; } }

p {
  border: 1px solid #eee;
  padding: 0.1rem; }

.f12 {
  font-size: 0.12rem; }

.f14 {
  font-size: 0.14rem; }

.f16 {
  font-size: 0.16rem; }

.f24 {
  font-size: 0.24rem; }

.f30 {
  font-size: 0.30rem; }

.f36 {
  font-size: 0.36rem; }
时间: 2024-11-06 23:34:56

响应字体大小(移动端)的相关文章

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高设置 汝甚吊

移动端通过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(

响应式网页设计:rem设置网页字体大小自适应

首先简单科普一下什么是响应式网页.响应式网页是指会根据输出设备的分辨率不同,而自动调整布局的网页.同时,在输出设备分辨率改变时,也能及时自动调整.说穿了,就是三个字:自适应. 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷. 当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯,而且在设计师的手里,文字在网页中的排版承载着一种艺术的直觉. 网页中常用的文字大小单位是

响应式布局中为什么要使用em设置字体大小而不用px

px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任何浏览器的默认字体大小都是16px. px相对的屏幕分辨率,而em相对于父级div,所以在响应式布局中使用em更合适,因为任何浏览器默认字体大小是固定的,而不同设备屏幕分辨率却各不相同. em有如下特点: 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. 所以

关于响应式布局的字体大小设置

原理:利用rem和js: 1.js设置html根节点的字体大小: window宽度/每行多少个字 2.rem是参照html节点的 <html> <head> <title></title> <meta charset="utf8"> <script type="text/javascript" src="jquery.min.js"></script> </

移动端应该如何动态设置字体大小?

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

移动端字体和字体大小规范

我们一般情况下,设计师有自己的规范,前端也有自己的规范. 设计师用的一般是方正字体,而我们前端用的往往是系统默认字体. 那么如何才可以达到最佳效果呢? 如何才可以做到所有移动设备上看到的字体和字体大小效果达到一致(最佳效果)? 1,使用网络提供的webfont字体库,比如是: http://www.iconfont.cn/webfont/#!/webfont/index 这个是阿里妈妈webfont平台提供的,思源字体,一般情况下,设计师只要找个跟自己平常差不多的就可以, 然后,由前端来下载这个

怎么设置(控制)移动端的字体大小

方法一:用css3的媒体查询来设置 html {font-size:12px} @media screen and (min-width:480px) and (max-width:639px) {html {font-size: 15px;}} @media screen and (min-width:640px) and (max-width:719px) {html {font-size: 20px;}} @media screen and (min-width:720px) and (m

移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示. 二.用户调整浏览器字体大小,影响的是从浏览器打开的web页 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { // 用原生方法获取用户设置的浏览器的字体大小(兼容i