移动端-像素和分辨率

1.像素分辨率

重点:像素 分辨率的关系

难点:印刷不同产品时的不同分辨率设置的理解

像素概念

网页中的像素单位

像素(pixel)概念

一般而言,pixel(像素)是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量,也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。

CSS像素(css pixel)

CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素。
在CSS规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。

按照CSS规范的定义,CSS中的px是一个相对长度,它相对的,是viewing device的分辨率

网页常见的像素宽度

网页宽度一般根据屏幕的分辨率来设计。普遍的网页设计有两种:1920px*1080px、1366x768。内容宽度一般为1000px-1200px。手机由于宽度的不同,需要自适应

设备常见的像素比例

Pc电脑的分辨率 1920px*1080px、1366x768

一般手机的分辨率:22441080 22801080 2340*1080

分辨率 ** 45’

分辨率与设计图的关系

分辨率(resolution)就是屏幕图像的精密度,是指显示器所能显示的点数的多少 即每英寸的 像素点 数量,分辨率大,点也越多,色彩就越丰富.

以电脑和手机屏幕来说,每英寸72像素点

在一般的广告公司里,做图像制作或者设计时,会根据不同的商品应用范围,而给出不同的分辨率。

1

网页效果图:分辨率设置72

喷绘效果图:分辨率 20

彩页广告:分辨率 150像素点

照片级: 300px

分辨率如何对比设计图

移动端制作网页时,设计图尺寸要求宽度为750 像素。

测量字体高度,例如高度为20px 则样式中的字体大小为.2rem (使用字体插件font.js)

2.rem单位

重点:rem单位

难点:rem与屏幕自适应的关系

em-- 相对单位 根据直接父元素改变大小

Rem 单位

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

一次设定根目录字体大小,就方便使用。

Rem的好处

Rem在移动端使用的优势  随屏幕做自适应,缩放。

如何动态设置rem

封装rem :

function abc(){

var vw = document.documentElement.clientWidth;

if(vw>768){vw=768}

document.documentElement.style.fontSize =(vw/7.5) +‘px’;

}

abc()

window.οnresize=abc

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页