移动端适配方案(rem+flex)
为什么用rem不用px?
主流:各大网站的移动版绝大多数都是用的rem。
移动端屏幕分辨率差别太大:最低适配的iPhone6,分辨率仅为750*1334。而现在市面上大多数手机,都达到了1080*1920或1080*2340(全面屏)。
所有元素都要用rem吗?
大部分时候都是如此,但也有一些例外,比如文字的font-size,可能直接设为如17px,直接写死。一些近乎占满整个宽度的banner,可能它的样式会是这样:(width: 100%;padding: 0 10px;),即左右宽度也用px写死。所以在移动端项目,出现rem和px混写也是再正常不过的事情。这就跟响应式布局的原则是一样的。不需要所有设备的布局比例严格完全相同,而是优先保证内容比较舒服地显示。
顺便提一下,应该大部分移动端文字内容都是用px写死的,不会用rem去写。防止过大或过小的文字效果。
移动端开发的通用原则是:文字流式,控件弹性,图片等比缩放。
为何要引入flex?
为了弹性控件,比如有些关键元素,里面有些控件,不管移动设备的分辨率怎么变,这个关键元素的高度恒不变,只有控件的间距在做动态的调整。举个例子,京东的底部导航栏:
(京东移动版在iPhone8p和ipad上的视觉比例不太一样,如果按同一个比例原封不动地移植到ipad上,很多图标和元素会显得非常巨大)
如何设置html初始的font-size?
没有固定答案,但它的设置又很影响开发的效率。为了避免rem和px的大量换算,我提供一个自己的做法:根font-size完全取决于设计稿的尺寸。
根据设计稿的尺寸,把根font-size处理成100px。在开发的过程中,比如碰到一个120px*40px的元素,那就可以写成1.2rem*0.4rem,十分方便。
比如设计稿是750*1334px,也就是以iPhone6为基础的。那要处理成100px的根font-size,就需要屏幕宽度/7.5即可。如果设计稿是1080*1920的,那就用屏幕宽度除以10.8。
设置的具体代码?
比如我现在的设计稿是750*1334px的,我在项目的index.html中加入这样一段js代码:
<script>
let deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.querySelector('html');
htmlDom.style.fontSize = deviceWidth / 7.5 + 'px';
</script>
还需要设置一下视口viewport,来避免devicePixelRatio带来的关于逻辑像素和物理像素的问题:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
比如在这里,我设置了“朋友圈所在的header样式如下:
即宽度为7.5rem,在各个移动端效果如下:
(可以看到,都占满了横向宽度,即能正确显示宽度为100%)
看了好几家大型网站的移动版网站,虽然看不到源码,但是我猜测腾讯视频移动版网站跟我的想法应该是一样的,而且设计稿应该就是750*1334px。传送门:https://3g.v.qq.com/。此外,我还借鉴了流云诸葛小伙伴的一篇文章,分析得很详细,感谢他这种研究精神。原文地址:https://www.cnblogs.com/lyzg/p/4877277.html?utm_source=caibaojian.com
移动端适配方案(rem+flex)的更多相关文章
- 移动端适配方案-rem(基础篇)
常见移动web适配方案一般有3种方法,如下图: ①:定高,宽度百分比(一般用来做一些适配性不高的页面,比如主要以一些文字和图片为主的网页或移动端的头部和底部) ②:flex (更多的用于复杂页面的布局 ...
- H5移动端适配方案-rem
为什么移动端要适配: 由于移动设备的尺寸不一,所以移动端的页面要能够适应不同尺寸的设备,即页面的自适应,让页面在视觉上保持一致. rem:rem 是css3的一种相对单位,参考是根元素HMTL的fon ...
- rem移动端适配方案
一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素 ...
- H5 APP 页面移动端适配方案
H5 APP 页面移动端适配方案 https://segmentfault.com/a/1190000011586301 https://juejin.im/post/5cbdee71f265da03 ...
- 基于Vue/React项目的移动端适配方案
本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-re ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端适配(rem & viewport)--移动端开发整理笔记(四)
移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸 我们知道,在不同的手机设备,分辨率大小是 ...
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- 手淘H5移动端适配方案flexible源码分析
移动端适配一直是一个值得探讨的问题,在业余时间我找了一些页面,查看了一些厂商对于移动端H5页面的适配方案,看到了几个典型的例子,今天就来记录一下我看到的第一个典型的例子,也是我们公司目前普通H5项目正 ...
- 移动端适配之REM
随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏 ...
随机推荐
- 架构组件:基于Shard-Jdbc分库分表,数据库扩容方案
本文源码:GitHub·点这里 || GitEE·点这里 一.数据库扩容 1.业务场景 互联网项目中有很多"数据量大,业务复杂度高,需要分库分表"的业务场景. 这样分层的架构 (1 ...
- PAT 1012 The Best Rank 排序
To evaluate the performance of our first year CS majored students, we consider their grades of three ...
- C# 从图片中截取一部分图片,并返回所截取的图片
/// <summary> /// 从图片中截取一部分图片 /// </summary> /// <param name="fromImagePath" ...
- css盒子布局,浮动布局以及显影与简单的动画
08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...
- docker中安装宝塔面板
我的电脑是win10,安装的virtualbox其上装的ubutun14,ubutun也安装了docker,今天我补充一个完整的操作流程.怎么在docker中安装宝塔面板?先打个岔,这些命令总是记不住 ...
- Linux shell--基础指令
Linux shell--基础指令 浏览Linux文件系统 Linux中最基础也是最必要的一条指令 cd destination cd命令可接受单个参数destination,用以指定想切换到的目录名 ...
- ckeditor5 使用第一天 下载并加载居中,居左,居右功能
官方网站地址https://ckeditor.com/,下载zip包或者从git上下载, 下载完成后解压文件,将文件复制到项目中 , 引用ckeditor.js,zh-cn.js路径到项目中, 初始化 ...
- [b0043] python 归纳 (二八)_python测试使用快速上手
参考 Python必会的单元测试框架 —— unittest # -*- coding: utf-8 -*- """ 测试代码组织,整理( 非可执行) "&qu ...
- docker 私有registry harbor安装
一,harbor安装: 参考:Installation and Configuration Guide 1,安装docker 2,安装docker compose sudo curl -L " ...
- 201871010112-梁丽珍《面向对象程序设计(java)》第十六周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...