屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的。对于Web开发的求职者而言,也是一个必需要理解清楚的经典问题

首发于微信公众号(啃先生) 

壹 | Fisrt

移动端适配的是什么?

我们讨论的是网页适配多种尺寸屏幕,让网页效果看起来和设计师的设计稿一样。说白了就是同一套代码在不同分辨率的手机上跑时,页面元素间的间距,留白,以及图片大小会随着变化,在比例上跟设计稿一致。

举个粟子吧

图1.  260*400的屏幕

图2.  380*400的屏幕

  上边的页面在不同大小屏幕上的展现,咋一看没什么问题,一般的工程师会认为已经OK了,所以前端工程师很容易忽略屏幕适配。但是对于一些精益求精的产品而言,这还达不到要求。例如有以下问题:

  1. 图1的屏幕的尺寸较小,因此头像应该小些,话题左边的空白也应该小一些。
  2. 图片应该保持正方形,而且两张图之间的边距应该随屏幕变化而变化

明白了,所以padding,margin,图片等的大小基本都要做适配

 

貳 | Second 

那有什么方法可以做到这种适配?

关键要找到一种长度单位,使得一样的取值,在不同尺寸的屏幕上的大小按比例缩放。

长度单位我只知道px

【移动适配】移动Web怎么做屏幕适配(一)的更多相关文章

  1. 【移动适配】移动Web怎么做屏幕适配(三)

    复杂纷扰的世界背后,总会有万变不离其宗的简单规则 啃先生 Mar.8th.2016 壹 | Fisrt 前面写了两篇移动适配相关的文章: <移动Web怎么做屏幕适配(一)>重点介绍了怎样利 ...

  2. 移动web屏幕适配方案

    刚进部门就被拉去趟移动端Web的浑水,视觉稿是按照640px设计的.那如何做屏幕适配呢?当然想到的第一方法就是问前辈了,问他们之前怎么做的,前辈说直接按视觉稿来,我说640太大了,他说除以2啊,按32 ...

  3. Unity 利用NGUI做屏幕分辨率适配+学习UIDraggablePanel的使用

    原地址:http://blog.sina.com.cn/s/blog_697b1b8c0101g2r4.html 大家使用unity,一定有看中其跨平台的强大功能,因此也难免会遇到不同屏幕分辨率适配的 ...

  4. IOS开发之绝对布局和相对布局(屏幕适配)

    之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便.在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处.下 ...

  5. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  6. iOS屏幕适配-iOS笔记

    学习目标 1.[了解]屏幕适配的发展史 2.[了解]autoResizing基本用法 3.[掌握]autoLayout 的基本用法 4.[掌握]autoLayout代码实现 5.[理解]sizeCla ...

  7. 再谈移动端Web屏幕适配

    一个多月前水了一篇移动web屏幕适配方案,当时噼里啪啦的写了一通,自我感觉甚是良好.不过最近又有一些新的想法,和之前的有一些不同. 先说一下淘宝的方案,感觉现在好多的适配方案都是受了它的影响,上周六看 ...

  8. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  9. Android 屏幕适配(一)百分比布局库(percent-support-lib) 解析与扩展

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46695347: 本文出自:[张鸿洋的博客] 一.概述 周末游戏打得过猛,于是周 ...

随机推荐

  1. Linux根文件系统分析之init和busybox

    Hi,大家好!我是CrazyCatJack.今天给大家讲解Linux根文件系统的init进程和busybox的配置及编译. 先简单介绍一下,作为一个嵌入式系统,要想在硬件上正常使用的话.它的软件组成大 ...

  2. 服务器未能识别 HTTP 标头 SOAPAction 的值

    SOAPAction HTTP request header被用来标识SOAP HTTP请求的目的地,其值是个URI地址.SOAP发送并不限制格式.URI特征或其必须可解析,那么在这种情况下,发送一个 ...

  3. sql分页代码

    //三种sql分页语句 SELECT TOP 分页尺寸 * FROM ( SELECT ROW_NUMBER() OVER (ORDER BY id) AS RowNumber,* FROM Blob ...

  4. 【HDU 5387】Clock

    题 Description Give a time.(hh:mm:ss),you should answer the angle between any two of the minute.hour. ...

  5. 3.linux man手册

    (12) man作用:查询man手册,获得帮助信息man 1 ls 1表示查询的是linux命令man 2 xxx 2表示查询的是linux apiman 3 xxx 3表示查询的是C库函数注意:在m ...

  6. 8种主要排序算法的C#实现

    作者:胖鸟低飞 出处:http://www.cnblogs.com/fatbird/ 简介 排序算法是我们编程中遇到的最多的算法.目前主流的算法有8种. 平均时间复杂度从高到低依次是: 冒泡排序(o( ...

  7. DataGridview焦点不移开不保存数据问题

    this.datagridLeft.ClearSelection();                this.datagridLeft.Refresh();                this. ...

  8. modernizr.js

    1.判断浏览器是否支持 h5 if(Modernizr.canvas){ alert(123); }else{ alert(321); } 2.判断浏览器是否支持 canvas function su ...

  9. 十六、Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...

  10. 简单计算器 (c语言课程设计)

    可以实现简单的加减乘除四则运算 #include<stdio.h> #include<string.h> #define MAX 10100 int main() { int ...