手机端实现1px边框

解决移动端1px边框问题的几种方法

1.边框粗细原因在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 2.解决办法 a.使用border-image实现根据需求选择图片,然后根据css的border-image属性设置.代

手机端的1px边框如何实现

(1).把边框设置为absolute,使用after,定义宽度为1px(mixin.styl) (2).通过@media,判断不同的dpi,来改变相应的Y轴宽度(base.styl),定义公共class border-1px,在用到1px边框的地方,加上border-1px 设备像素又叫物理像素是显示屏能够控制的最小显示单位. css像素它就是css上用的像素: border: 1px solid black; 它是web编程抽象的概念,不存在的, 它独立于设备, 用于在逻辑上衡量像素设

手机端1px细线公共类

手机端1px细线公共类 .borderBottom1px{ position: relative; } .borderBottom1px:after{ content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #e3e3e3; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; } 手机端1px细线公共

移除手机端a标签点击自动出现的边框和背景

手机端a标签会自动补充出现边框或者背景,使得用户知道a标签的点击状态,但样式很不好看 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>我的生活</title> <meta name

第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去除所有元素的内外边距*/ *{ margin:; padding:; } /*去除所有ul里li的小圆点*/ ul{ list-style-type: none; } /*去除所有a的下划线*/ a{ text-decoration: none; } /*将图片转换成区块,将图片最大宽度设置成100%,使图片

【学习】如何制作手机端html模板（REM的实际应用）

以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东西,并且听了一位有经验同事的讲解,顿时豁然开朗,现在对于手机端的页面开发,可以说胸中有一点丘壑了.rem最能打动我的地方在于,他不会改变原来在PC端的代码书写习惯,只是把计量单位换了一下,所以迫不及待的拥抱他了! 具体用法贴出如下: 1.html文档(当然是html5)的头部添加一个meta标签声明

移动端1px边框问题

用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪类相对于这个元素是一个绝对定位,通过伪类画一个1px边框,然后把它定位到元素的下面,就变成一个下边框. border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0

h5手机端下拉选择城市

<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximu

手机端使用rem适配

最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会有偏差但是基本是没有问题的. 因为最近也是刚刚用,还在摸索中,有兴趣的朋友可以研究下.如有问题,还请见谅.(ps只有新的页面或者项目适用,不适于用二开的项目避免发生不必要的问题) <script type="text/javascript"> var phoneW

手机端的tab切换，响应式切换效果

之前写过这些tab切换的效果,无论网页上还是手机端,网上也有很多的例子,这个好像是我参考网上,也不知道是哪里的了.总结了一下,就当保存下来了把. <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" co

ecshop开发日志之手机端虚拟商品自动发货

在ecshop官方模版收,web端的虚拟商品购买后不能像pc端那般直接在付款后出现虚拟商品的卡号,密码,截止日期一下为让手机购买也可以在付款后自动显示发货并能显示卡号密码截止日期首先找到pc端的flow.php文件中的$_REQUEST['act'] = 'done' 这里面是用来处理订单的最后一步,(具体怎么知道的可以看url后的参数列表),对应手机端处理订单的的文件为 mobile/order.php 文件,这里同样有一个$_REQUEST['act'] = 'done',对比里面的代码

第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

html5+css3移动手机端流体布局,旅游部分,媒体查询媒体查询媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等媒体查询,这里我们不去详细去讲解,这个放到后面响应式章节讲解,这里简单使用即可. /*媒体查询,大于480小于640*/ @media (min-width:480px) and (max-width:640px) { #tour h2 { font-size: .26rem; } #tour h3 { fon

手机端rem如何适配_rem详解及使用方法

什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

手机端的viewport属性

Window.devicePixelRatioThis read-only property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. 该值为分辨率之间的比,不是直接比较像素.分辨率是指单位英寸内像素数,类似于PPI.pc端浏览器中dpr的值都为1,所以css中1px的元素在屏幕中占据1物理像素.但在手

7种方法解决移动端Retina屏幕1px边框问题

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

在移动端画出真正的1px边框

一.问题写H5的样式时候,设置元素的边框为1px,不幸的事情在IOS设备上发生了,设计师会说,咦,边框怎么那么大,这是2px了吧?改成1px.我明明设置成1px了啊. 二.为什么边框变粗了? IOS使用的是retina屏,因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px.所系css设置1px的样式,实际是2px的效果.devicePixelRatio的官方定义:"设备物理像素和设备独立像素的比例,也就是de

山西大同大学教务处教师端——可在PC端，手机端操作

解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应下载方法(学生端 / 教师端 / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE-E8HU6fduh4ag 提取码:t2gl 有关验证: 教师端验证: MD5: b3884e11469b22be44fb495cdcf518f1 SHA1:0d888c5a63ec09364e990ac3d76d7ca522b5d4fe SHA256:8c28e3ab213196d736781

山西大同大学教务处学生端--送给学弟，学妹的礼物，可在PC端，手机端操作

解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教务处也可以登录,但是只限于登录而已,想要进行其他操作只能呵呵了.即使你的浏览器开了兼容模式也不一定可以操作.多半只能让其他同学帮你选课了.于是我分析了下学校的网站内容,下出了这个教务处学生端的网页.算是对的起自己所学的东西吧.教师端的话没账号没法试,以后有机会了写下. 其实,这个文档在去年11月份就

移动端1px边框实现

问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像素比.即devicePixelRatio=物理像素/独立像素.iPhone使用的是Retine屏,“Retina”是一种显示技术,可以把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度.因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRa

手机端页面自适应解决方案—rem布局进阶版

手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/annie211/p/8118733.html 该方案使用相当简单,把下面这段已压缩过的原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置) <script>!function(e){functio

7种方法实现移动端Retina屏幕1px边框效果

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

手机端实现1px边框

热门专题