概述

之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用。

我上一篇博文主要有2个误区,下面我一一记下来。

这篇博文参考了移动端适配方案(下)

适配方案

有多种适配方案:

  1. 百分比布局:高度和宽度用百分比。由于高度和宽度的百分比是按照父元素尺寸的,所以改动父元素会使子元素发生变化,非常难以维护。
  2. px布局:固定宽度,viewport缩放。就是全部用px,然后用js控制initial-scale的缩放比例。这样在不同屏幕上面,页面都会按比例整体缩放,也比较方便维护。
  3. rem布局:rem做度量单位,改font-size。

需要注意的是,如果只实现页面整体放大缩小的话,方法1和方法2的效果是一样的!!!

适配目的

我之前说,我们的适配目的是:对于不同的屏幕,页面只需要简单地放大或缩小即可。对于这个目的,上面的方法2和3都能达到效果。

但是,人类发明更宽的设备,并不只是想看到更宽的字体或者更大的页面,而是想看到更漂亮的布局内容。而这才是响应式的精髓:根据不同大小的屏幕展现不同的内容给别人看

所以从这一方面来看,方法2是远远不够的,所以我们需要方法3,优点有2个:

  1. 可以结合rem和px实现部分内容大小不变!
  2. 可以用rem响应式的为不同大小的屏幕展现不同的布局!

目前我只了解到了方法3这个程度,方法3有个局限性,就是对dpr不能很好地适配,所以以后如果有更好的兼容dpr的适配方案,我再记下来。

移动端font-size适配方案(续)的更多相关文章

  1. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  2. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  3. 移动端高清适配方案(解决图片模糊问题、1px细线问题)

    本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...

  4. 移动端Web页面适配方案

    概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度  windw.innerWidth/Height layout viewport 布局视口,DOM宽度 doc ...

  5. 基于Vue/React项目的移动端适配方案

    本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...

  6. 移动端高清、多屏适配方案——rem

    背景: 开发移动端H5页面 一套设计图 不同尺寸的手机 不同分辨率的手机 方案:使用rem作为单位解决一套设计图适应不同分辨率,不同尺寸的手机. 概念: REM(font size of the ro ...

  7. rem移动端适配方案

    一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...

  8. web移动端适配方案

    web移动端常用解决方案: 一.通过js+rem,这里有一个解决方案(http://imochen.github.io/hotcss/) 1.1.rem兼容性(https://caniuse.com) ...

  9. html5移动端主流适配方案

    1.流式布局(百分比布局)    案例:京东移动端 优点:简单方便,只需要固定高度,宽度自适应: 缺点:大屏幕手机实际显示的不协调. 2.响应式布局 优点:可以节约成本,不用再做专门的web app网 ...

随机推荐

  1. 浅谈System.gc()

      今天巩固给大家讲讲System.gc().Java的内存管理着实给各位编程者带来很大的方便,使我们不再需要为内存分配烦太多神.那么讲到垃圾回收机制,就不得不讲讲System.gc().   先简单 ...

  2. AJAX-php-json数组

    1.在php中有个数组,响应回前端 $array=["习大大","川普","金三胖"];2.JS对象数据格式 ex: 数组: var TOM ...

  3. 【转】python 2.6.6升级到python 2.7.x版本的方法

    1.下载python2.7.x wget https://www.python.org/ftp/python/2.7.6/Python-2.7.6.tgz 2.解压并编译安装 tar -zxvf Py ...

  4. 2018.10.25 bzo1227: [SDOI2009]虔诚的墓主人(组合数学+扫描线+bit)

    传送门 有点难调啊.其实是我自己sb了 不过交上去1A1A1A还是平衡了一下心态. 所以这道题怎么做呢? 我们考虑对于一个点(x,y)(x,y)(x,y)如果这个点成为中心,正左/右/上/下分别有l/ ...

  5. JS将时间戳转化为时间

    //将时间戳转化为时间 function timestampToTime(timestamp) { var date = new Date(timestamp * 1000);//时间戳为10位需*1 ...

  6. ZSetOperations 操作解释 拷贝过来的 哈哈哈

    有序集合,默认按照score升序排列,存储格式K(1)==V(n),V(1)=S(1)(K=key,V=value,S=score) 1.add(K,V,S):添加 2.count(K,Smin,Sm ...

  7. Latex插图操作

    1.竖排插入两张图 \begin{figure}[h] //放在当前位置 \centering \subfigure[A given traffic flow set]{ \includegraphi ...

  8. 使用spring boot +WebSocket实现(后台主动)消息推送

    言:使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!主要是tomcat的兼容与支持. ...

  9. mac环境下配置nginx

      1.建议使用homebrew安装(ruby安装 brew install ruby)   ruby -e "$(curl -fsSL https://raw.githubusercont ...

  10. XML xmlns

    xmlns xml namespaces 参考 http://www.w3school.com.cn/tags/tag_prop_xmlns.asp http://www.w3school.com.c ...