精华内容
下载资源
问答
  • 什么是媒体查询? 答:媒体查询是向不同设备...举一个简单的例子:网页字体大小随窗口的大小而改变 @media screen and(min-width:900px) //窗口宽度大于900px { body{ font-size:25px; } } @media screen...

    什么是媒体查询?

    答:媒体查询是向不同设备(手机,平板,电脑)提供不同样式的一种不错方式,它为每种类型的用户提供了最佳的体验。

    举一个简单的例子:网页的字体大小随窗口的大小而改变

    @media screen and(min-width:900px) //窗口宽度大于900px
    {
      body{
           font-size:25px;
          }
    }
    
    @media screen and(min-width:500px)and(max-width:900px) //窗口宽度大于500px小于900px
    {
      body{
           font-size:20px;
          }
    }
    
    @media screen and(max-width:500px) //窗口宽度小于500px
    {
      body{
           font-size:15px;
          }
    }

     

    展开全文
  • 手机网页自适应 rem 与 px 转换方案: 基础知识点: 1、浏览器默认字体大小为 16px; 2、通过手机屏幕的宽度 和 网页最大宽度 的换算比例,设置html 的font-size; 3、css 中统一使用 rem 单位来表示。 关键 ...

    手机网页自适应 rem 与 px 转换方案:

    基础知识点:

    1、浏览器默认字体大小为 16px;

    2、通过手机屏幕的宽度 和 网页最大宽度 的换算比例,设置html 的font-size;

    3、css 中统一使用 rem 单位来表示。

    关键 rem.js代码(让 100px = 1rem ,这样就十分容易换算,比如10px = 0.1rem;1px = 0.01rem;20px=0.2rem 以此类推):

    我的设计稿宽度是 750px,手机网页的最大宽度 750px,所以js 中是 750

    function setRemPx(pwidth,prem){
        var oWidth = document.body ? document.body.clientWidth : document.documentElement.clientWidth;
        oWidth = oWidth > pwidth ? pwidth : oWidth;
        var html = document.getElementsByTagName("html")[0];
        html.style.fontSize = oWidth/pwidth*prem + "px";
    }
    setRemPx(750,100);
    window.onresize = function(){
        setRemPx(750,100);
    /*640代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;
      100代表换算比例,这里写100是为了以后好算,
      比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等
    */
    };
    
    //解决安卓系统 微信中,由于微信APP字体变大后,网页错乱的问题.
    (function() {
      if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
          handleFontSize();
      } else {
          document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
      }
      function handleFontSize() {
          // 设置网页字体为默认大小
          WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
          // 重写设置网页字体大小的事件
          WeixinJSBridge.on('menu:setfont', function() {
              WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
          });
      }
    })();

    HTML 代码中引用:

    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="utf-8" />
        <meta name="renderer" content="webkit" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
            <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
            <title></title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="Shortcut Icon" type="image/x-icon" href="fav.ico" />
        <link rel="apple-touch-icon-precomposed" href="/apple_touch_icon144.png"  />
        <meta name="apple-touch-fullscreen" content="yes" />
        <meta name="apple-mobile-web-app-title" content="档案" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <script src="rem.js"></script>
        <link href="style.css?202011021200" type="text/css" rel="stylesheet" />
    </head>

    CSS中的写法:如 .3rem就相当于设计稿中的30px;.5rem = 50px,这样写css 就非常轻松。

    注:-webkit-overflow-scrolling: touch;-webkit-text-size-adjust: 100% !important; 是为了解决ios端微信APP字体变大,网页字体g跟着变大破坏布局的问题。android 微信APP字体变大破坏布局的问题,已在 rem.js 中解决了。

    body{max-width:750px; min-width:320px;margin:0 auto;font-size: .3rem;line-height: .5rem;color:var(--maincolor);-webkit-overflow-scrolling: touch;-webkit-text-size-adjust: 100% !important;}
    .suplrpad{padding-left:.6rem !important;padding-right:.6rem !important;}
    .biglrpad{padding-left:.5rem !important;padding-right:.5rem !important;}
    .milrpad{padding-left:.4rem !important;padding-right:.4rem !important;}
    .ltlrpad{padding-left:.2rem !important;padding-right:.2rem !important;}
    .blank10px,.blank15px,.blank20px,.blank30px,.blank40px,.blank50px{clear:both;display:block;width:100%;overflow:hidden;}
    .blank10px{height:.1rem;}
    .blank15px{height:.15rem;}
    .blank20px{height:.2rem;}
    .blank30px{height:.3rem;}
    .blank40px{height:.4rem;}
    .blank50px{height:.5rem;}

    写代码调试工具:chrome  手机模式 iphone 6/7/8 下调试。

    展开全文
  • 现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。 事故造成原因:1.px单位在PC上很流行,在...

     

    rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定。现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB。

    事故造成原因:
    1.px单位在PC上很流行,在手机屏幕上一看,MLGB的,同样的12px却小的跟蚂蚁似的。
    2.好不容易在iPhone4上调的正常了,换个菊花牌手机,MBD不堪入目了。
    3.知道了rem的用法,但是html的font-size到底是多少才合适啊啊啊,妈蛋~。

    好了,那么现在来解决这些问题。
    在解决之前,麻烦各位大婶要了解一些你可能不想了解的东东(警告:不了解这些就不能知道真相哟~):
    1.物理像素(physical pixel)
    我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒(物理像素)组成的。


    2.逻辑像素
    是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。

    3.设备的像素比(device pixel ratio)简称DPR
    它的数值体现了物理像素和逻辑像素之间的关系,用公式可以计算出该设备的DPR的大小:

    DPR = 物理像素 / 逻辑像素
    

    那么了解了上面这些概念,就可以知道,为什么css在pc上写着font-size=12px;但是换到手机上却变小了?因为DPR啊啊啊,大哥~。
    没错,我们在电脑屏幕上的DPR是1,但是手机却不同,可能是它可能是2,也可能是3。获取设备DPR的方法还是有的:
    1.在JavaScript中,通过window.devicePixelRatio来获取
    2.在css中,可以通过-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同DPR的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

    本人也在网上看了不少动态设置rem的文章,下面把几个常用的列举出来:一,用媒体查询来设置html的font-size:

    @media screen and (min-width: 320px) {
        html {font-size: 14px;}
    }
     
    @media screen and (min-width: 360px) {
        html {font-size: 16px;}
    }
     
    @media screen and (min-width: 400px) {
        html {font-size: 18px;}
    }
     
    @media screen and (min-width: 440px) {
        html {font-size: 20px;}
    }
     
    @media screen and (min-width: 480px) {
        html {font-size: 22px;}
    }
     
    @media screen and (min-width: 640px) {
        html {font-size: 28px;}
    }
    

    二、利用js来动态设置

    !(function(doc, win) {
        var docEle = doc.documentElement,
            evt = "onorientationchange" in window ? "orientationchange" : "resize",
            fn = function() {
                var width = docEle.clientWidth;
                width && (docEle.style.fontSize = 20 * (width / 320) + "px");
            };
         
        win.addEventListener(evt, fn, false);
        doc.addEventListener("DOMContentLoaded", fn, false);
     
    }(document, window));
    

    我要说的是最后一种,也是我认为目前比较好的实现方法:
    利用js计算当前设备的DPR,动态设置在html标签上,并动态设置html的font-size,利用css的选择器根据DPR来设置不同DPR下的字体大小(这个方法很不错哦~)

    !function(win, lib) {
        var timer,
            doc     = win.document,
            docElem = doc.documentElement,
    
            vpMeta   = doc.querySelector('meta[name="viewport"]'),
            flexMeta = doc.querySelector('meta[name="flexible"]'),
     
            dpr   = 0,
            scale = 0,
     
            flexible = lib.flexible || (lib.flexible = {});
     
        // 设置了 viewport meta
        if (vpMeta) {
     
            console.warn("将根据已有的meta标签来设置缩放比例");
            var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
     
            if (initial) {
                scale = parseFloat(initial[1]); // 已设置的 initialScale
                dpr = parseInt(1 / scale);      // 设备像素比 devicePixelRatio
            }
     
        }
        // 设置了 flexible Meta
        else if (flexMeta) {
            var flexMetaContent = flexMeta.getAttribute("content");
            if (flexMetaContent) {
     
                var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
                    maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);
     
                if (initial) {
                    dpr = parseFloat(initial[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
     
                if (maximum) {
                    dpr = parseFloat(maximum[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
            }
        }
     
        // viewport 或 flexible
        // meta 均未设置
        if (!dpr && !scale) {
            // QST
            // 这里的 第一句有什么用 ?
            // 和 Android 有毛关系 ?
            var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
                _dpr = win.devicePixelRatio;
     
            // 所以这里似乎是将所有 Android 设备都设置为 1 了
            dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
                            ? 3
                            : (_dpr >= 2 && (!dpr || dpr >= 2))
                                ? 2
                                : 1
                      )
                    : 1;
     
            scale = 1 / dpr;
        }
     
        docElem.setAttribute("data-dpr", dpr);
     
        // 插入 viewport meta
        if (!vpMeta) {
            vpMeta = doc.createElement("meta");
             
            vpMeta.setAttribute("name", "viewport");
            vpMeta.setAttribute("content",
                "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
     
            if (docElem.firstElementChild) {
                docElem.firstElementChild.appendChild(vpMeta)
            } else {
                var div = doc.createElement("div");
                div.appendChild(vpMeta);
                doc.write(div.innerHTML);
            }
        }
     
        function setFontSize() {
            var winWidth = docElem.getBoundingClientRect().width;
     
            if (winWidth / dpr > 540) {
                (winWidth = 540 * dpr);
            }
     
            // 根节点 fontSize 根据宽度决定
            var baseSize = winWidth / 10;
     
            docElem.style.fontSize = baseSize + "px";
            flexible.rem = win.rem = baseSize;
        }
     
        // 调整窗口时重置
        win.addEventListener("resize", function() {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }, false);
     
         
        // 这一段是我自己加的
        // orientationchange 时也需要重算下吧
        win.addEventListener("orientationchange", function() {
            clearTimeout(timer);
            timer = setTimeout(setFontSize, 300);
        }, false);
     
     
        // pageshow
        // keyword: 倒退 缓存相关
        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }
        }, false);
     
        // 设置基准字体
        if ("complete" === doc.readyState) {
            doc.body.style.fontSize = 12 * dpr + "px";
        } else {
            doc.addEventListener("DOMContentLoaded", function() {
                doc.body.style.fontSize = 12 * dpr + "px";
            }, false);
        }
      
        setFontSize();
     
        flexible.dpr = win.dpr = dpr;
     
        flexible.refreshRem = setFontSize;
     
        flexible.rem2px = function(d) {
            var c = parseFloat(d) * this.rem;
            if ("string" == typeof d && d.match(/rem$/)) {
                c += "px";
            }
            return c;
        };
     
        flexible.px2rem = function(d) {
            var c = parseFloat(d) / this.rem;
             
            if ("string" == typeof d && d.match(/px$/)) {
                c += "rem";
            }
            return c;
        }
    }(window, window.lib || (window.lib = {}));
    

    忘了说了,手机淘宝很多页面用的就是这种方法来适配终端的。

    然后留个demo,可以看一下手机淘宝用上面方法怎么实现的(用手机扫下面的二维码吧):

    或点击去查看
    结束语:
    其实想要适配好不同终端并不难,一定要理解好什么是物理像素、什么是逻辑像素、什么是DPR,并且弄清楚他们之间的关系,我们这些搞前端的,不就是在与像素打交道吗?

    转载于:https://www.cnblogs.com/gopark/p/8157765.html

    展开全文
  • 举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem移动端自适应网页的编写自适应: 当屏幕的像素变大的时候,字体和元素也响应变大什么是视口: 移动设备上的viewport就是设备...

    rem与px 的换算

    计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;

    举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem

    移动端自适应网页的编写

    自适应: 当屏幕的像素变大的时候,字体和元素也响应变大

    什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域

    代码如下

    Document

    // 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变

    html {

    font-size: 100px;

    }

    body {

    font-size: 16px;

    }

    h1 {

    font-size: 0.12rem;

    }

    // 试试手机为ip6plus和ip5时,div的宽高各是多少(px)

    div {

    width: 1rem;

    height: 1rem;

    background: gray;

    line-height: 1rem;

    }

    function resetWidth() {

    // 兼容ie浏览器 document.body.clientWidth

    var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;

    console.log(baseWidth);

    // 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整

    document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'

    }

    resetWidth();

    window.addEventListener('resize', function () {

    resetWidth();

    })

    内容

    postcss-pxtorem 像素自动转换成rem

    习惯了写px,所以也希望我在写px的时候能够主动转换成rem,使用 postcss-pxtorem就能实现我们的愿望

    安装postcss-pxtorem

    npm i postcss-pxtorem --save-dev

    打开项目根目录下的package.json,在postcss的plugins里添加下面的代码

    "postcss-pxtorem": {

    "rootValue": 100,

    "propList": [

    "*"

    ]

    }

    91ac1690be89

    image.png

    展开全文
  • 这是一个拘于html5手机网页的开发,里面有带手机网页开发插件,以及针对页面的自适应,和字体大小的自适应。采用的是轻量级的手机网页开发插件zepto进行封装,还有控制图片懒加载的脚本插件
  • 如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至...
  • 而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还原设计稿就成了一个前端开发者需要解决的当务之急。我查阅了大量资料和进行了一些实践,...
  • 【实例简介】这是一个拘于html5手机网页的开发,里面有带手机网页开发插件,以及针对页面的自适应,和字体大小的自适应。采用的是轻量级的手机网页开发插件zepto进行封装,还有控制图片懒加载的脚本插件【实例截图】...
  • 自适应手机屏幕的一段JS代码

    千次阅读 2016-05-25 11:20:37
    今天,在调网页界面的时候,遇到了一个问题,同样的样式,在一个页面上显示效果挺好,另一个无论是字体还是样式布局,都会显得相对的小。经过查找,发现是一段JS代码在“捣鬼”。附上代码: function resetPage() { ...
  • 响应式布局和自适应

    2021-06-13 19:06:26
    网页时,经常要求要适配不同屏幕,要求可以在大屏幕,ipad,手机上可以显示正常。对于公司的官网这是很重要的。那么,这就涉及到了响应式布局和自适应。 文章目录响应式布局和自适应前言一、响应式布局二、自适应...
  • 自适应网站、移动端

    2021-05-31 14:40:03
    移动端网站: 手机网站 响应式网站 bootstrap4 layui 站长工具 1.设备独立像素 2.设备物理像素 3.设备像素比(DPR) ...加粗样式网页字体大小 网页默认字体大小是:16px 网页最小字体大小是:12px ...
  • 前言现在手机屏幕分辨率越来越多,...rem(font size of the root element)是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化,那么整个网页中运用到 rem的也会随之变化。加之当前手机淘汰速度
  • 请问用Bootstrap写的自适应网页放到手机端浏览页面就缩小了,而且字体也变小了,怎么解决呢?求助!!!
  • 三、技术创意点1、CSS3动画2、Sprite动画3、重力感应+视差4、字体图标5、自适应SVG图形6、Loading进度条7、单屏滑动8、游戏9、地理定位10、音频使用11、手机重度新官网 一、硬件背景(重要!) 易观智库的一个...
  • 前言:移动设备(手机、平板电脑等),已经逐渐成为人们生活中必不可缺的物件了,这也意味着人们更多的用移动设备浏览网页。然而移动设备有着各式各样的分辨率与大小,这使用前端开发人员不得不去设配它们。 相关...
  • 在做手机web或app的时候,为适应不同屏幕,你可能需要写很多针对不同屏幕大小的css代码,那么这个时候我们如果用固定大小去设置字体的大小就要些很多...css3中也出现新的字体单位rem,在几乎所有的自适应网页设计的...
  • 博客正文默认采用16PX字体,阅读体验更加良好,字号有14px、16px、18px可供访客选择。背景为什么不用白色,白色黑字长久阅读会很累,白色是高光,反光度高,而用低光度的纸质背景对眼睛有适当的保护作用,长时间看...
  • 手机页面制作

    2016-01-06 22:58:00
    拿到设计图使用markman标好尺寸、字体大小和颜色等,但是是什么字体我还不知道如何...这是一张手机端的html5网页,一般考虑适应webkit内核,还有就是需要设置meta标记防止缩放、自适应等,代码如下: <meta n...
  • 手机WAP网站 相关

    千次阅读 2014-05-14 20:17:32
    对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,还...
  • 对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或14px,那么,不一样的终端的效果差别会很大。所以这里,最好让网页的宽度自适应屏幕,.....
  • 手机版网站起码要实现一些基本的功能吧: ...所以这里,最好让网页的宽度自适应屏幕,还好,w3c在设计html的时候为我们考虑了这一点,只需一句话,就可以搞定,就是加上 对于字体的话,我
  • 一、px、em、rem和%的定义 ...由于它是固定大小的单位,单独用它来设计的网页,如果适应大屏幕(电脑),在小屏幕(手机)上就会很不友好,做不到自适应的效果。 示例: <!DOCTYPE html> ...
  • flexible.js是淘宝推出的一款移动端手机自适应的库,源码内容很简洁,当网页使用了该库之后,页面会在head中加入对应的页面响应式的meta标签。 当使用flexible.js的时候,引入百度联盟的广告代码,会发现广告的文字...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

手机网页字体自适应