适配方案(一)之移动端适配

老版常规做法

方案一:Meida Queries媒体查询

meida queries 主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心语法是:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
  /*你的css代码*/
}

需要添加meta设置

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0:表示初始的缩放比例

minimum-scale=1.0:表示最小的缩放比例

maximum-scale=1.0:表示最大的缩放比例

user-scalable=no:表示用户是否可以调整缩放比例

这个标签可以保证在移动端设备中,页面的宽度与屏幕宽度相同。

方案二:viewport缩放

以最小的Iphone4/5的宽度(320px)为基准,还原视觉稿。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 />

然后对不同屏幕分辨率的手机进行简单粗暴的等比例缩放设置。 例如:iphone8(375px)initial-scale = 375 / 320 = 1.18

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />

initial-scale越来越大,页面内容也就被拉伸也越厉害,导致页面内容会变得模糊,这个方法已经被摒弃了。

高度定死,宽度自适应,元素都采用px做单位。

随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』

方案三:响应式布局

新做法

方案四:rem

换句话说,当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12px,那么这个2rem的元素font-size就是24px。同理当该元素为3rem时,那么其实际

font-size就是36px


html {font-size: 12px;}

h1 { font-size: 2rem; } /* 2 × 12px = 24px */

p { font-size: 1.5rem;} /* 1.5 × 12px = 18px */

div {width: 20rem;} /* 20 * 12px = 240px*/

看到这里你应该就会发现,只要我们根据不同屏幕设定好根元素<html>的font-size,其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。

rem计算

我们使用rem单位事先需要做的一件事情就是设置根元素<html>的font-size,通常有两种做法

方法一:JS计算

通过JavaScript读取屏幕宽度,然后根据宽度计算出对应的尺寸并设置根元素的font-size。


const oHtml = document.getElementsByTagName(‘html‘)[0]

const width = oHtml.clientWidth;

// 320px的屏幕基准像素为12px

oHtml.style.fontSize = 12 * (width / 320) + "px";

这样iphone8(375px)下html的font-size 就是14.0625px,iphone8p下font-size就是15.525px。

如果在iphone8(375px)下设置元素font-size为 1.7066rem, 效果跟设置其font-size为 24px 是一样的(24 / 14.0625 = 1.7066)。

使用JS来获取屏幕宽度的好处在于可以100%适配所有的机型宽度,因为其<html>元素的基准尺寸是直接算出来的。既然是JS代码,为了避免造成因为动态设置<html>元素的font-size而造成页面抖动,一般这部分代码我们放在header

底部去加载,并内联到html文档里面。

方法二:媒体查询

既然只是为了根据屏幕宽度来设置<html>元素的字体大小,那我们完全也可以通过css3媒体查询来完成这部分工作。


@media screen and (min-width: 375px){

   html { font-size: 14.0625px; }

}

@media screen and (min-width: 360px){

  html { font-size: 13.5px; }

}

@media screen and (min-width: 320px){

html { font-size: 12px; }

}

html { font-size: 16px; }

rem存在的问题

rem作为一种简单粗暴解决不同屏幕下视图的区别的一种方案,它可以解决本文出现的问题以及绝大多数移动端适配屏幕尺寸的问题。但是既然它并不是一个完美的解决方案,那就有其局限性所在。

大屏智能机时代确实几乎完全替代了我十年前纸质化阅读的习惯。从2011年至今,手上的手机屏幕宽度一直在提升,但是使用的看小说软件的显示字号几乎是不变的。使用rem会在一定程度上打破用户的文字内容阅读习惯,特别是在大篇

幅的内容时。

iOS与Android平台的适配方式背后隐藏的设计哲学是这样的:阅读文字时,可读性较好的文字字号行距等绝对尺寸数值组合与文字所在媒介的绝对尺寸关系不大。(可以这样简单理解:A4大小的报纸和A3大小甚至更大的报纸,舒适的阅

读字号绝对尺寸是一样的,因为他们都需要拿在手里阅读,在手机也是上同理);在看图片视频时,图片、视频的比例应该是固定的,不应该出现拉伸变形的情况。而rem用在字号时,使字号在不同屏幕上的绝对尺寸不一致,违背了设计

哲学。

参考

简单粗暴的移动端适配方案 - REM

阿里巴巴TXD移动端适配总结

原文地址:https://www.cnblogs.com/kunmomo/p/11766336.html

时间: 2024-09-28 17:44:42

适配方案(一)之移动端适配的相关文章

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

基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9536126.html

移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px(会被重置为12px) 固定设计稿的宽度开发

【原创】移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

移动端适配方案

Flexible适配方案 最早的文章,是15年阿里手淘团队的移动端适配方案. 设计师常选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变). 前端开发人员通过一套适配规则自动适配到其他的尺寸. 先了解一些基本概念 视窗viewport 简单理解,viewport是严格等于浏览器的窗口,在桌面浏览器中,viewport就是浏览器窗口的宽度高度. 但是在移动端的viewport太窄,为了能更好的为css布局服务,所以提供了两个vie

H5常用代码:适配方案5

此方案跟方案4是同一原理,也是通过REM实现的,能单独归类出一个方案,是因为它有一定的实用价值,当你遇到追求完美,追求到一像素的UI或者产品时,那此方案将解决你的困境. 方案5主要是用来解决一像素边框来设计的,当你的设计稿中到处是一像素边框,而UI跟产品拿着手机频频跟你说为什么在手机上边框这么粗的时候,而又无法劝服他们妥协的时候,就用这种适配方案吧,亲. 适配方案5代码如下: <!DOCTYPE html> <html> <head> <title>主结构&

给你一个全自动的屏幕适配方案(基于SW方案)!—— 解放你和UI的双手

Calces系列相关文章:Calces自动实现Android组件化模块构建 前言 屏幕适配一直是移动端开发热议的问题,但是适配方案往往在实际开发的时候会和UI提供的设计稿冲突.本文主要是基于官方推荐的配置限定符方案(Smallest Width目前Android屏幕适配的最优方案)来实现一个接近完美的屏幕适配方案. 对于完美的适配方案笔者是这样定义的: 能完美适配UI稿. 适配完毕后,在高清设备上不会出现模糊的现象. 尽量减少对项目的侵入性. 下面我会从屏幕适配的一些基础知识入手,向你慢慢展现一

微信iOS多设备多字体适配方案总结

一.背景 2014下半年,微信iOS版先后适配iPad, iPhone6/6plus.随着这些大屏设备的登场,部分用户觉得微信的字体太小,但也有很多用户不喜欢太大的字体.为了满足不同用户的需求,我们做了全局字体设置功能,在[设置-通用-字体大小]这里修改设置后,微信大部分界面都会随之缩放. 二.多设备适配 1.各设备的逻辑分辨率: 关于iphone6/6plus的物理分辨率.逻辑分辨率.屏幕物理尺寸.PPI等资料,很多文章已经有详细说明了,这里就不再累赘.对于终端开发人员来说,其实我们需要关心的

移动端适配难点

1.移动端开发通常都会在html中写下以下的meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 需要注意的是无论是这样写还是用淘宝flexible.js动态生成meta头,目的只有一个,那就是让布局视口等于苹果手机的分辨率宽高/设备像素比后的宽高.苹果手机的分辨率是指以下所示 而不

Android屏幕适配框架-(今日头条终极适配方案)

在Android开发中,屏幕适配是一个非常头痛的问题,因而为了去进行屏幕适配,作为程序员,是呕心沥血,历经磨难,哈哈 我们之前做屏幕适配一般都会用到一下两种方式: 第一种就是宽高限定符适配,什么是宽高限定符适配呢 ├── src/main│   ├── res│   ├── ├──values│   ├── ├──values-800x480│   ├── ├──values-860x540│   ├── ├──values-1024x600│   ├── ├──values-1024x768│