移动端
furfur-jiang
你若盛开,清风自来
公众号:程序江
展开
-
作为前端的你不能不知道的知识,总结物理像素,像素密度,分辨率,CSS像素,设备像素比,二倍图,layout viewport、visual viewport 、ideal viewport、meta。
此篇文章是关于各种像素总结及视口等基本概念的讲解。首先我们来谈谈最基础的物理像素。物理像素(设备像素)物理像素是真实存在的像素,显示设备中一个最微小的物理部件,即屏幕上可以显示的最小颗粒,在同一个设备上,它的物理像素是固定的,即一个设备的分辨率是固定的。所谓的一倍屏、二倍屏,指的是设备以多少物理像素来显示一个CSS像素,越多的物理像素去显示一个css像素就会提高其清晰度。可以通过以下代码...原创 2020-04-04 14:31:44 · 753 阅读 · 1 评论 -
媒体查询的意义及使用(针对不同的屏幕大小显示不同的样式)
媒体查询可以针对不同的屏幕大小显示不同的样式这是css3的新特性语法ps:写在style内@media mediatype and|not|only (media feature){ /*css代码*/}参数详解:mediatype即媒体类型,可以写成以下任一个all 表示所有设备print表示打印机和打印预览screen 电脑屏幕,平板,手机,最...原创 2020-03-27 23:39:01 · 976 阅读 · 0 评论 -
移动端如何获得更清晰的图片(物理像素与开发px关系)
物理像素是真实存在的最小的颗粒,可以成为分辨率电脑的1开发px = 1个物理像素点但是iphone8 1px = 2个物理像素iphone6 Plus 1px = 3个物理像素也就是说,一个图片在电脑端和手机端看到的清晰程度会不同如果是一个1px=2个物理像素也就是说准备的图片需要是手机所需2倍,然后通过手动缩小一倍,可以让移动端的图片更加清晰可以利用ps软件的cutterman多...原创 2020-03-27 22:18:59 · 516 阅读 · 0 评论 -
移动端必备的meta标签(理想视口)
meta标签写于head里面,title前面,最为推荐的写法<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">分析:content="width=device-width:表示宽度等...原创 2020-03-27 21:45:05 · 897 阅读 · 0 评论 -
极度简单地用真机测试页面效果
首先保证你都手机和你的电脑在一个局域网内,可以电脑开wifi然后cmd打开控制台,输入config获取无线局域网ip地址最后修改locallhost:127.0.0.1注意端口号保留,只修改前面部分,然后就可以在手机端打开了...原创 2020-03-26 15:59:41 · 139 阅读 · 0 评论