老师 我分不清楚了 750的设计稿是手机375的尺寸,手机 768的尺寸我们的设计稿是768吗

老师 我分不清楚了 750的设计稿是手机375的尺寸,手机 768的尺寸我们的设计稿是768吗

老师 这些是数字是设计稿的尺寸还是手机的尺寸 

min-width: 576px
min-width: 768px
min-width: 992px
min-width: 1200px
  

老师 一个页面适应多个终端,ui设计他们给我们的就只有一个750的设计稿是吗 

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕夭夭 2019-12-15 12:11:12

同学你好,问题解答如下:

1.关于尺寸会涉及到几个概念,参考如下进行理解

(1)物理像素,也叫做屏幕分辨率,这个是出厂就设置好的。750px就是iphone6的物理像素(即手机的屏幕分辨率)。

(2)设备独立像素,也叫做逻辑像素。对于前端来说,可以叫做css逻辑像素。例如一个div宽度为200px,这就是逻辑像素。

(3)设备像素比 = 物理像素 / 逻辑像素(px) 。设备像素比就是dpr,例如iPhone6设备下,dpr为2, 即一个css逻辑像素占两个物理像素。尺寸为375px的页面,在750px分辨率的手机上恰好显示。所以375px说的是页面的尺寸,750px说的是手机的分辨率。

(4)在PC端的浏览器中模拟iPhone6的环境 ,会发现浏览器中标记为375×667 ,如下:

http://img1.sycdn.imooc.com/climg/5df5a9c50972a28c03430057.jpg


这是手机的逻辑像素,这就表示我们在css中写375px的宽度,就可以在iPhone6下达到全屏的效果。

2. 设计稿采用的手机的分辨率,例如常见的750px,就是手机的分辨率。所以手机尺寸是768px,设计稿就是768px。

3. 同学说的以下宽度是应用在哪里呢?

http://img1.sycdn.imooc.com/climg/5df5ad0b093e383a05030158.jpg

如果是在媒体查询中设置,例如如下:

http://img1.sycdn.imooc.com/climg/5df5ae95090ec81505330152.jpg

如果是的话,它不是设计稿的宽度,也不是手机的尺寸,它说的是浏览器的宽度。

4.对,只有一个设计稿,如果适应其他的设备,使用媒体查询去设置样式即可。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师