html640设计稿,为什么写移动端的ui给的640设计稿的宽度，在写html的时候要除以2才正好。...

ui给的设计稿是640的

为什么我在浏览器要设置成320iphone5的宽度来写html代码??

640代表的是手机的分辨率，也就是实际的物理像素，为640×1136

这个物理像素并不代表css像素，意思就是说设计稿的10px并不是你写在html的css的10px

这有一个换算，大多iPhone倍率是2，iPhone 6P的倍率是3，物理像素640 / 倍率2 = 320 ，得到逻辑像素

这个逻辑像素的值就是css像素

也就是说设计稿的640相当于写在html的css的320

你在做的时候，只要将设计稿量到的像素值除以2，再写到html的css里面

因为小屏iphone宽度就是320啊

安卓是360

给点提示，物理分辨率、逻辑分辨率，像素密度DPI。

视网膜屏有关吧

iphone5s的逻辑分辨率是320×568，但是物理像素是640×1136，像素密度2。

并不是所有手机都是 320px，常见手机的宽度可以用 chrome dev tool 查看

iphone5s的逻辑分辨率是320 x 568,而物理分辨率是640 x 1136，像素倍率是2。

相当于物理分辨率为320的iphone5s刚好显示物理像素为640的图片不会模糊。

可以了解一下DPI相关

现在很多要么基于iphone5的640设计稿，要么是基于iphone6的750设计稿，实际屏幕宽均为盖设计稿一半

Rentina显示屏原理及设计方案

说明：retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。

那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

用REM做元素大小的单位。你去搜下rem。其实REM单位就是个根据比例自动给你算好PX大小。这个比例是根据HTML的默认字体大小为基数。具体你去找个教程看下。

html640设计稿,为什么写移动端的ui给的640设计稿的宽度，在写html的时候要除以2才正好。...相关推荐

手机UI设计，用手机也能进行UI设计？
手机UI设计的概念是手机软件的人机交互.操作逻辑.界面美观的整体设计,而不是字面的在手机上进行UI设计,手机也运行不了设计的软件.手机UI设计是置身于手机操作系统中人机交互的窗口,设计界面必须基于手机 ...
html还原ui,前端高度还原设计稿（字体篇）
前言: 以前前端都是拿到psd设计图,需要自己用ps切图,需要自己在psd上面一个个去量设计的大小和间距,而现在一般都是要求设计师把设计稿直接上传到蓝湖上面,通过蓝湖的标注来写出前端代码!下面我就前端 ...
iOS端的UI设计文档
iOS端的UI设计文档 APP和网站,风格色调始终注意保持一致(平台一致性) 在App不断更新的过程中定义设计准则.风格.规范设计规范: 1.分类合理(为了能让用户快速查找,合理的分类必不可少) 2 ...
B 端设计师必不可少的表单设计（上）
本文将我自己踩过的坑整理出来,目的是为了帮助那些刚迈入职场的设计师,对表单能有一个更好的了解,从而避免在工作中进入误区. 本文共计11000个字,阅读大约需要30分钟,请合理安排时间,看得快的当我没说 ...
B端设计师必不可少的表单设计（上）
本文由作者陈志强CHETChan 于社区发布本文将我自己踩过的坑整理出来,目的是为了帮助那些刚迈入职场的设计师,对表单能有一个更好的了解,从而避免在工作中进入误区.也希望能给PM们提供一些思路. ...
sketch如何做设计稿交互_用 Sketch 绘制一份美观的交互稿
经常有人问我:"你的交互稿怎么画得那么好看?能不能教教我?" 其实,我更期待听到的是:"你的方案怎么做得这么好?能不能教教我?" 毕竟,交互稿只是需求的沟通工具 ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript...
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
采用计算机数控技术的自动控制系统为,终稿毕业论文：C6150车床主轴的加工数控工艺规程设计.docOK版（范文1）...
<毕业论文:C6150车床主轴的加工(数控)工艺规程设计.doc>由会员分享,可免费在线阅读全文,更多与<(终稿)毕业论文:C6150车床主轴的加工(数控)工艺规程设计.doc(OK ...
手把手教你写B端产品PRD
在说B端产品需求文档如何写之前,先说一下需求文档的展现形式,我以前分享WORD形式的PRD文档写法,很多人会说我分享的内容过时了,现在都是用AXURE来写文档,当我分享AXURE形式的PRD文档写法的 ...

html640设计稿,为什么写移动端的ui给的640设计稿的宽度，在写html的时候要除以2才正好。...

html640设计稿,为什么写移动端的ui给的640设计稿的宽度，在写html的时候要除以2才正好。...相关推荐

最新文章

热门文章