PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML5+CSS3教程 > 正文

    什么是Retina 显示屏,带来了什么问题

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,...
    retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个

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

    那么,前端的应对方案是:

    设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的1/2

    //例如图片宽高为:200px*200px,那么写法如下
    .css{width:100px;height:100px;background-size:100px 100px;}

    其它元素的取值为原来的1/2,例如视觉稿40px的字体,使用样式的写法为20px

    .css{font-size:20px}

    参考《高清显示屏原理及设计方案

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-142-2876-1.html
    相关热词搜索: