前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2px 所以我们在移动端中为了让1px的线“看起来”苗条些,会采用一些手段. 解决办法 实现1px的线 方法一:transform 在移动端中,我们对宽度100%,1px的线进行改造,将其宽度设为200%,高度不变,之后使用transform对其缩放50%. .line{ width:200% ; h

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域.其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系.这里首先了解以下几个概念. 一.视口 1.layout viewport(布局视口) 一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.iOS, Android基本都将这个视口分辨率设

最近开发发现一个很有趣的问题  就是我如果给一个元素加上一个像素的 border 在不同的分辨率的情况下显示的不同 在高清屏幕(尤其是ios 喽 不鄙视国产) 据说在6plus下会变成3px  这个我就不知道了 因为我没有... 那么我们换个单位行不行? 因为移动端不用px来做 啊  对不起 你换了rem 或者em都不行(我只是测试了这两个单位) 废话不多说了  说一下解决方案 看一下我们老大 淘宝的解决方案 简单粗暴 更实用啊  这个图片我觉得够大了  对就是用了一个宽度为1px的div来模拟

px:css pixels逻辑像素,浏览器使用的抽象单位 dp,pt :device independent pixels 设备无关像素 dpr:devicePixelRatio 设备像素缩放比 计算公式:1px=(dpr)2 * dp iphone 5 的dpr等于2 因此:平面上 1px=4*dp  640dp*1136dp 纬度上 1px=2*dp  320px*568px DPI:打印机每英寸可以喷的墨汁点 PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度 在计算机显示设备参数描述上

border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0) // 为边框位置提供定位参考 position: relative; if $border-width == null $border-width: 0; border-radius: $radius; &::after // 用以解决边框layer遮盖内容 pointer-events: none; position: ab

本文主要针对移动端1物理像素问题展开 解决这个问题先要了解一下概念: CSS像素(CSS Pixel):(通俗说:样式中写的值)就是我们在样式代码中常写的逻辑像素,是一个抽象概念,实际并不存在 设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素 设备像素(Device Pixel):物理像素,设备能控制显示的最小单位,我们眼睛看到的屏幕上所呈现的像素大小就是这个,我们常说的1920×1080

问题提出 这是一个比较老的问题了,我第一次注意到的时候,是UI设计师来找我麻烦,emmm那时候我才初入前端职场,啥也不懂啊啊啊啊啊,情形是这样的:设计师拿着手机过来:这些边框都粗了啊,我的设计稿上是1px的我:????我写的是1px呀,不信你看.(说着拿出了css代码设计师:不对啊我眼睛看来这个边框比我设计稿上粗很多,看起来好奇怪(emmm果然像素眼我:那我把它改成0.5px你看看(边说边改了代码设计师一看,点点头,果然好很多.后来发现同样的代码在某些安卓机上是有问题的,会导致0.5px的线看不

做项目的时候总结了一个styled中解决移动端项目1px像素线的问题,封装了一个函数,大家可以直接使用,很方便. 1 import styled from 'styled-components' const border = ({ component=null, width='1px', style='solid', color='#ccc', radius=0 }) => { return styled(component) ` position: relative; border-width

有时候在移动端显示1像素的边框时 可能因为dpi 的原因造成像素有变差 所以为了达到显示的像素达到预期效果就要编写一个css 通用类达到1像素边框的效果 关于dpi 的解释请看张鑫旭老师的文章:http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ 下面是代码部分 .border-1px{ position: relative; } .border-1px::after{ content: " "; di

我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每个像素可以根据操作系统设置自己的颜色和亮度.设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如CSS像素),然后由相关系统转换为物理像素.根据物理像素和设备独立像素也衍生出了设备像素比(device pixel ratio)的概念,简称为

图像处理对于前端工作来说是一个不能回避的问题,ps技术也是我们必备的技能.用法可以在使用中不断的熟练,但针对前端技术本身的一些知识点,需要我们平时不断的积累才能够在使用中不出现问题. 如今的办公,已经离不开ps,作为一款图像处理软件,各行各业的人或多或少都会用到它.对于前端攻城狮而言,ps也是一个不可或缺的技术.今天小编想讲的ps,不聊它的用法,也不聊技巧.单说一些对于前端而言需要清楚的图像小知识. 1.单位 ps(Adobe Photoshop)给我们提供很多种单位计量,对于前端,我们常用到只

[Android]调用字符串资源的几种方法   字符串资源的定义 文件路径:res/values/strings.xml 字符串资源定义示例: <?xml version="1.0" encoding="utf-8"?> <resources>     <string name="hello">Hello!</string> </resources> 字符串资源的调用  在 Layout

近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签能够通过固定宽高的方式来压缩大图.从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧.css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑. 那么问题来了,我们的网页

touchstart和touchend事件 移动互联网是未来的发展趋势,现在国内很多互联网大佬都在争取移动这一块大饼,如微信及支付宝是目前比较成功的例子,当然还有各种APP和web运用. 由于公司的需要,最近也在开发移动web,对于一个没有移动开发经验的人来说,其实也是比较困恼的一件事情.对于移动web开发目前主要是基于webkit内核的浏览器.在webkit内核的环境下开发,你可以充分的运用html5+css3,还有它的一些私有属性.这让我很兴奋.可是,毕竟,对于一个长期习惯pc端做固定像素开

尺寸属性:用来控制元素大小的属性,单位为长度单位. 尺寸属性的使用场景 当使用相对长度单位定义尺寸时,元素的大小跟随窗口大小变化. 为保证元素的正常显示,需要设定元素的最大.最小长度. 手机端开发时需要声明元素的最大或最小长度,pc端通常使用像素. 最大或最小长度应使用像素单位. 例: <style type="text/css"> div{ border: 2px black solid; width: 30px;/* 或者30%等 */ height: 40px;/*

label = QLabel('我是李明') #创建标签控件对象.参数:标签中要显示的文本 label.setText('我是明明') 修改标签控件显示的文本 self.label.text() 返回标签的文本 self.label.resize(200,20) 设置标签的宽和高 self.pic_label.setPixmap(QPixmap('off.png')) #在标签上添加一张图片.     需要 from PyQt5.QtGui import QPixmap self.label.s

1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分. <meta name="viewport" content="width=device-width,inital-scale=1.0, maximum-scale=1.0,user-scalab

1.首先说滚动条 移动端开发在不设置任何适配和viewport宽度的情况下,以iphone5为例:屏幕界面的逻辑分辨率是320x568,在谷歌浏览器的界面下屏幕的可视宽度是980px(谷歌设置的,每个浏览器宽度不一样), 所以界面如果是980可以横向铺满全屏: 如果超过980就会出现滚动条.比如界面宽度是1200: 所以屏幕出现滚动条很大可能是 viewport设置不对或者未配置这个属性(滚动条一般取决于viewport 里面的宽度设置,如果没有配置viewport里面的宽度,并且界面宽度超出浏

1.字符串资源>>1.普通字符串>>2.字符串数组 <resources> <string-array name="planets_array"> <item>aaa</item> <item>bbb</item> </string-array> </resources> 获取方式:getResources().getStringArray(R.array.plane

1. 单行文字溢出时省略号 .test{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 2. 多行文字溢出时省略号 .test{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 3. 移动端单条0.5px细线 .border-b{ position: relative; } .

在此之前,此系统是结合DICOM的WADO标准,在浏览器里通过javascript操作返回的JPG图片.这种服务器端解析,客户端展现的方式,对实现图像的移动.缩放.旋转.测量等图像操作能够实现实时的交互.但这种方式存在着几个弊端: 1.获取图像上的CT值(钙化值)信息的时候,要频繁的和服务器进行交互. 2.调整图像的窗宽窗位或者对图像进行反色,也要和服务器进行频繁的交互. 3.对图像进行测量(长方形测量,椭圆测量等)只能获取到面值和周长的简单的信息,这对于医生的诊断没多大的用处,实际运用中需要知