移动入门 -- 适配

适配要达到何种效果?

在不同尺寸的手机设备上,页面要能够良好的展示, 不会出现错位变形(自适应), 或者保持统一效果的等比缩放。

设计稿尺寸

第一个问题就是选用多大的设计稿尺寸,如果按照320px的设计稿切图,在retina屏幕下,图片会失真。因为在retina屏幕上以 ipone4(320*480)为例,其实际像素点个数为 640*960。

贴一张图帮助理解

如上图所示,普通屏幕(左图)和 retina屏幕(右图)1个css像素所对应的物理像素是不一致的。

在普通屏幕下, 1个css像素 对应 1个物理像素 (1:1)

在 retina 屏幕下,1个css像素 对应 4个物理像素 (1:4)

理论上来说,一个图片上的像素对应一个物理像素,图片才能得到完美展示。

在普通屏幕下没有问题,但是在 retina 屏幕下就会出现图片像素点不够,从而导致图片模糊。

贴一张图帮助理解

如上图:对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊(注意上述的几个颜色值)。

因此,对于图片失真问题,解决办法就是采用 两倍大小的图片

但是如果在普通屏幕下,也采用 两倍图片,会怎么样呢?

如左图,1个物理像素对应4个图片像素,结果是因此色差。

综上:处理图片在高清屏下1倍大小的图片的失真和普通屏下2倍图片色差的问题,应该准备两套图片,通过媒体查询或者来引入相应的图片url

retina下,border:1px问题

由于在retina屏幕上1个css像素对应2个物理像素,也就是说它的最小显示单元为0.5个css像素,如果我们设置如下css

border: 1px solid #000;

在普通屏和retina屏幕上的效果是这样的

也就是说,我们无法写出只占一个物理像素的边框样式,因为设置0.5px 在某些系统中会被当成0px。

网上的解决办法是

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ddd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

:after 来偏移出另外的0.5像素,  这种 hack 不够通用,无法处理圆角等.

另外一种是处理方案是 对于 dpr=2 的屏幕添加如下meta标签

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

设置 viewport 的初始缩放比例为 0.5, 这样整个页面的 1px 边框都会变成 0.5px, 适用于所有场景

但是缩放整个页面也会带来一定的问题:

1、字体大小也会被缩放,在普通屏和高清屏下无法显示一致

2、页面布局也会被缩放

适配布局

网上有很多种布局方案,这里只写一致认为比较好的方案,rem布局

原理: 根据不同手机尺寸和 dpr 动态改变根节点<html>的 font-size 大小,页面其他元素以此为基准进行计算

直接贴代码

var docEl = document.documentElement,
    metaEl = document.querySelector(‘meta[name="viewport"]‘),
    styleEl = document.createElement(‘style‘),
    dpr = win.devicePixelRatio || 1,
    rem = docEl.clientWidth * dpr / 10,
    scale = 1 / dpr;

// 动态是指 viewport 的缩放比例
metaEl.setAttribute(‘content‘, ‘width=device-width, initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);

// 设置data-dpr属性, 留作 css hack 之用
docEl.setAttribute(‘data-dpr‘, dpr);

// 动态写入样式
docEl.firstElementChild.appendChild(styleEl);
styleEl.innerHTML = ‘html{ font-size: ‘+ rem +‘px !important; }‘;

计算 rem 说明

1. 乘以 dpr ,规避缩放对布局和字体大小的影响

2. 除以16,我也不知道,据说为了换算出一个较小的基准值,也可以设置为10,或者任何你想要设置的值

通过计算的html的font-size为:

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px * 2/ 10 = 64px

iphone6: 375px * 2 / 10 =  75px

如何在css编码中还原视觉稿的真实宽高?

对于宽度为 640px的设计稿, 如果一个div的宽高为 300*320px 如何转换成rem

用 sass 封装一个 mixin

// 例如 toRem(height, 300)
$ppr: 640px / 10 * 1rem;  // pixel per rem
@mixin toRem($property, $values...){
    $max: length($values);
    $remValues: ‘‘;
    @for $i from 1 through $max{
        $value: nth($values, $i) / $ppr;
        $remValues: #{$remValues + $value};
        @if $i < $max{
            $remValues: #{$remValues + " "};
        }
    }
    #{$property}: $remValues;
}

所以对于宽高为 300*320px 的div,可以这样写

@include toRem(width, 300px);
@include toRem(height, 320px);

得到的css代码为

width: 4.6875rem;
height: 5rem;

字体大小问题

不同的dpr会导致不同的缩放比例,字体也会被缩放,由于字体不能使用rem,所以需要对不同的dpr屏幕应用不同的字体大小,也可以封装一个mixin,我还不知道如何封装,等我知道了再来补全 ^_^

参考网站:移动端高清,多屏适配移动端页面使用rem布局

时间: 2024-10-25 20:00:35

移动入门 -- 适配的相关文章

iOS开发(一稿适配所有iOS设备)— AutoLayout入门

智能手机发展到今天,屏幕尺寸变的越来越多,iPhone从最初的3.5寸屏幕,到后来推出的4寸屏,直到苹果推出iPhone 6 和 iPhone 6Plus,也宣告着苹果阵营被彻底攻破,进入了屏幕尺寸碎片化的时代.只为某一个屏幕尺寸设计的日子已经不在存在.为了适配所有的屏幕,设计师必须考虑各种屏幕尺寸.但是又不可能为每个尺寸都设计一遍.那么我们又该如何面对屏幕碎片化的困境? 图1,图片来自:HTTP://WWW.PAINTCODEAPP.COM/NEWS/ULTIMATE-GUIDE-TO-IPH

log4j2使用入门(二)——与不同日志框架的适配

在上方中已经指出log4j2可以与不同的日志框架进行适配,这里举一些实际应用进行说明: 1.比如我们在项目中使用了log4j2作为日志器,使用了log4j-api2.6.2.jar和log4j-core2.6.2.jar.但项目中引用了一些中间件(例如activemq),而由于activemq用到了slf4j,这样我们项目目前将不能输出activemq中的日志.解决方法如下:在项目中加入log4j2提供的log4j-slf4j-impl2.6.2.jar就可以了.此处要注意的是,不要误用了log

DWR之入门实例(一)

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-

Android Wear 开发入门

大家好,我是陆嘉杰,我是一名Android开发者.我想和大家进行一些技术交流,希望越来越多的人能和我成为好朋友. 大家都知道,智能手表是下一个开发的风口,而这方面的技术又属于前沿,所以和大家分享下Android Wear的开发流程. 首先,我推荐大家使用Android Studio来进行Wear的开发,这也是谷歌推荐的,本次讲授过程也将以Android Studio作为开发集成环境进行. 下面我们来创建Android Wear项目. 请注意,Android Wear项目中同时包含mobile和w

Android基础入门教程——1.1 背景相关与系统架构分析

Android基础入门教程--1.1 背景相关与系统架构分析 1.Android背景与当前的状况 Android系统是由Andy Rubin创建的,后来被Google收购了:最早的版本是:Android 1.1版本 而现在最新的版本是今年5.28,Google I/O大会上推出的Android M,有趣的是Android系统的命名都是以点心来命名的,下述表是15个Android版本名称,对应API号以及发布时间! 系统版本名称 API版本号 发布时间 Android 1.5:Cupcake:纸杯

自己用:23种设计模式+UML入门

学习设计模式之前,总是需要UML来辅助 UML的入门 设计模式的灵魂在于:灵活地多态,继承,封装. 把你所描述的类,抽象出一个关键词,形成父类,再把他继承.实现接口 但是继承还是不太好,因为增加了很多冗余成分,所以产生了组合. 运用组合实现了多态里面的东西 对话的形式来写技术可能会更好啊. 老板:小朱啊,今天给我讲一下责任链设计模式吧 我:责任链设计模式啊,我昨天试着写着写着也不知道哪里出错了,他是把策略这个关键词封装成一个数组,然后如果你想添加新的策略的时候,可以在里面直接添加一个策略元素,这

iOS开发之Auto Layout入门

随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto Layout的使用,与大家分享.  什么是Auto Layout? Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 为什么要用Auto Layout? Autolayout能解决不同屏幕(iPhone4,iPhone5,iPad...)之间的适配问题. 在iPhone4时代开发者只需要适

“H5跨平台APP开发”APICloud从入门到精通

"H5跨平台APP开发"APICloud从入门到精通 课程学习地址:http://www.xuetuwuyou.com/course/164 课程出自学途无忧网:http://www.xuetuwuyou.com 课程介绍:               一.课程使用到的软件 APICloud Studuio(或Sublime.WebStorm加上APICloud插件) Google Chrome浏览器 海马玩手机模拟器(或真机) 二.课程目的:     随着IOS.Android等原生

android的入门记录(一)

---恢复内容开始--- 首先,这是我人生中的第一篇博客,也许严格意义上它并不算是一篇博客,但也代表着一些东西. 前言 我们往往在开始学习一门新的语言或者课程时会遇见各式各样的问题,比如说:环境搭建遇到问题,资源不知道去哪里下载,代码令人无法下手,甚至不知道如何运行. 于是便产生了这样的一篇文章--关于我Android入门的记录,以及各式各样问题的解决. 首先从资源的寻找说起. 第一节 开发环境的搭建 Android开发首先需要搭建运行环境,它们分别为 1.JDK:Java开发工具包,因为安卓使