-
常用方案一查看全部
-
1、图片处理-dp； 2、一像素边宽-position: absolute;border:1px solid #ddd;scaleY(0.5); 3、相对单位rem； 4、多行文本溢出处理text-overflow： ellipsis； word-break： break-all；-webkit-box-orient： vertical；-webkit-line-clamp： 2； 5、为了解决rem在进行单位换算上的麻烦问题，给大家介绍个使用rem的小方法，设置html字体大小为font-size:625%;然后使用rem的时候就更好用了，比如0.12rem=12px, 0.14rem=14px 0 .16rem=16px 解决字体默认大小兼容问题查看全部
-
1.iphone5 的分辨率是 640 * 1136 （物理像素） dp,pt： device independent pixels 设备无关的像素 2.开发中应该是320 * 568 （逻辑像素） px: css pixel （逻辑像素），浏览器使用的抽象单位 3.dpr:devicePixelRatio 设备像素缩放比 可视度越小，系统默认的设置缩放比越大 4.计算公式 1px = dpr * dpr * dp iphone5的css像素为320 * 560 的原因是 iphone5的dpr = 2 即一个css像素由4个物理像素渲染 平面上：1px = 2 * 2 * dp 640 * 1136 维度上 ： 1px = 2 * dp 320 * 568 5.1英寸(in)=2.54厘米(cm) DPI ：打印机每英寸可以喷的墨汁点（一般用于印刷行业） PPI ： 屏幕每英寸的像素数量，即单位英寸内的像素密度 在计算机显示设备上，二者基本一样 ppi = (1136 * 1136 + 640 * 640) 开根 / 4(屏幕尺寸) = 326ppi(视网膜Retina屏) 注:屏幕尺寸是指显示器屏幕对角线的尺寸 ppi 是用物理像素算，而不是px 6.Retina屏 的dpi 大于或等于2 ，iphone6的dpi = 3查看全部
-
align-self : 子元素自己设置对齐方式; 值： flex-start -> 顶层; flex-end -> 底层; center -> 居中; auto/*default*/ -> 同拉伸; baseline -> 文字基线; stretch -> 拉伸; justify-content : 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式; align-content : 属性对齐交叉轴上的各项(垂直)方向上的对齐方式; 值： flex-start -> 左对齐; flex-end -> 右对齐; center -> 居中; space-between -> 两侧对齐; space-around -> 间距平分; flex-warp : 当子元素宽度大于父元素宽度时是否换行; 值： nowarp/default -> 默认当子元素宽度大于父元素宽度时不换行; warp -> 换行; warp-reverse -> 换行倒序; flex-direction : 规定灵活项目的方向; 值： row/defaultr -> 默认值,灵活的项目将水平显示,表示一行显示; row-reverse -> 与 row 相同,一行显示,顺序相反; column -> 灵活的项目将垂直显示,表示竖列显示; column-reverse -> 与 column 相同,竖列显示,顺序相反; initial -> 设置该属性为它的默认值; inherit -> 从父元素继承该属性,纵向倒序; align-items : 在父元素统一设置子元素; align-items 整个容器分两行; align-content 按照子项目自己的高度换行,显得比较挤;查看全部
-
web 移动端 第一章 一、pixel像素基础问题 iphone5 的分辨率是 640 * 1136 （物理像素） 开发css中应该是320 * 568 （逻辑像素） 1、css像素 ：逻辑像素，浏览器使用的抽象单位 ，pdf像素是物理像素 2、px : css pixel （逻辑像素），浏览器使用的抽象单位 3、dp, pt ： device independent pixels 与设备无关的像素 4、dpr ： devicePixelRatio 设备像素缩放比（可视度越小，系统默认的设置缩放比越 大） 5、计算公式 1px = dpr * dpr * dp iphone5的css像素为320 * 560 的原因是 iphone的dpr = 2，即一个css像素是4个物理像 素 平面上：1px = 2 * 2 * dp 640 * 1136 维度上 ： 1px = 2 * dp 320 * 568 7、DPI ：打印机每英寸可以喷的墨汁点（一般用于印刷行业） 8、PPI ： 屏幕每英寸的像素数量，即单位英寸内的像素密度 在计算机显示设备上，二者基本一样 ppi = (1136 * 1136 + 640 * 640) 开根 / 4 = 326ppi(视网膜Retina屏) ppi 是用物理像素算，而不是px ldpi mdpi hdpi xhdpi(超高清) ppi 120 160 240 320 默认缩放比 0.75 1.0 1.5 2 Retina屏 的dpi 大于或等于2 ，iphone6的dpi = 3查看全部
-
总算是理解了 先算ppi 再得到对应的dpr 以常见的5.7寸 1920*1080屏做例子 那就是1920的平方加1080的平方和开根得到386ppi>320ppi 那么缩放比的dpr=2.0 那么1逻辑像素就等于4个设备像素 形象点就是由一个“口”变成的“田” 那么长宽就各是2倍的关系 高就是1920/2=960px 宽就是1080/2=640px查看全部
-
1像素边框方案 li:before{position:absolute;top:-1px;left:0;content:'';width:100%;height:1px;border-top:1px solid #ccc;-webkit-transform:scaleY(0.5);}查看全部
-
1024/平板 布局查看全部
-
1080/720布局查看全部
-
新旧flex对比查看全部
-
640和1136是分辨率(即物理像素，是固定的)，4是英寸。 手机4英寸是指手机对角线的长度是4英寸，而非长宽。 公式前半段套用直角三角形公式，长的平方加宽的平方等于对角线的平方，再开根号，得出对角线的物理像素，再除以4，等于1英寸上物理像素密度为326.查看全部
-
一像素边框查看全部
-
为了解决rem在进行单位换算上的麻烦问题，给大家介绍个使用rem的小方法，设置html字体大小为font-size:62.5%;然后使用rem的时候就更好用了，比如1.2rem=12px,1.4rem=14px,1.6rem=16px.查看全部
-
Pixel查看全部
-
度量viewport和布局viewport查看全部
举报
0/150
提交
取消