border-1px的实现（stylus）如何在移动端设置1px的border

在这里我只介绍下边框的实现: 当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx,2Npx.为保设计稿还原度,解决就是用media + scale. 实现原理:伪类+缩放工具:stylus预编译器 1.在 stylus文件夹中创建mixin.styl文件,内容如下:(即通过伪类+子绝父相实现1px的下边框,这只是开始,并没有结束 ) border-1px($color) position: relative &:after display:…

在vue项目中使用stylus来实现移动端的1px

1.目录结构(vue项目,但是并不局限于vue) 2.首先定义一个mixin.styl文件 border-1px($color) position: relative &:after display: blcok position: absolute left: 0 bottom: 0 width: 100% border-top: 1px solid $color content: ' ' 3.再定义一个统一处理dpr的stylus文件,base.styl //这里我们使用@media媒介查询…

移动端实1px细线方法

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

table的td设置1px的方法，亲测有效

第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白色: 这样,就大功告成了. 第二种方法: 1.设置BORDER=0 : 2.再通过CSS,给Table加上1px的border-top,border-left: 3.然后再设置所有的td的border-right,border-bottom: 不妨试试哦第三种方法: 1.设置table的CSS为{…

通过改写原始对象的paint 方法，来设置对象的border颜色

解决方案: //通过改写原始对象的paint 方法,来设置对象的border颜色 1. package test1;import java.awt.Color;import java.awt.Graphics;import java.awt.Rectangle;import javax.swing.JFrame;import javax.swing.JPanel;import javax.swing.border.LineBorder;public class MyFrame { public…

移动端 CSS 1px 问题及解决方案

移动端 CSS 1px 问题及解决方案 viewport & transfrom: scale viewport 的 initial-scale 设为 1 UI 设计稿用rem 和 transfrom: scale(0.5) 实现 https://stackoverflow.com/questions/22777734/what-is-initial-scale-user-scalable-minimum-scale-maximum-scale-attribute-in/40222507#402…

移动端比1px还小的border

巧用border 在移动端经常出现border,细边框但有的时候产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码希望对大家有所帮助 .thinner-border { position: relative; width: 1px; margin:14px 0; height: 20px; } .thinner-border:after { content: ''; position: absolute; width: 500%; height: 500%…

移动端页面0.5px border的实现

移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框代码如下: <!doctype html> <html lang="en"> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <m…

移动端的1px边框问题

最近在做一个移动端项目,涉及到1像素问题其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取,具体的比例差距由设备决定如何解决这个问题才是重点,下面集中提出解决方案: 1.媒体查询利用设备像素比缩放,设置小数像素 css可以写成这样: .border{b…

在移动端实现1px的边框

由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点所以 border: 1px 在移动端会渲染为 2px 的边框与设计图产生差异,并且没有那么美观. 两种解决方法: 一.transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框首先用伪类创建边框 .border-bottom{ position:…

css移动端适配 1px边框的解决方案

.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是1px @media screen and (-webkit-min-device-pixel-ratio:2) { .border::after{ content: ''; position: absolute; left: 0; top: 0; border: 1px solid #000; b…

移动端边框1px的实现

查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放. border-right fr:after{ height:100%; content:' '; width:1px; border-right:1px solid #f0f0f0; position:absolute; top:0; right:-1px; transform:scaleX(0.5); -webkit-transform:scaleX(0.5); z-index:10; } border-…

css笔记--web端小于1px设计的处理方法

HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>last-child</title> <style> body{ color:#333; } li.test-last-child:after{ display: block; content: ''; height: 10px;…

width100%，设置padding或border溢出解决方法

.box { width: 100px; height: 100px; background: red;} .bd { width: 100%; padding: 10px; background: black;} <div class="box"><div class="bd"></div> </div> 如上结构,子元素将会溢出解决方法:CSS3: 加入box-sizing:border-box;属性即可解决一般…

移动端适配1px问题

(function(document) { var dcl = document.documentElement, wh; var scale = 1/window.devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=…

CSS border边框属性教程(color style)

CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色.虚线.实线等样式CSS属性.同时大家可以进入码农教程提供CSS手册查看border手册:http://www.manongjc.com/cssref/pr_border.html 二.Html原始边框与DIV+CSS边框对照 Html表格控制边框:border="1" bordercolo…

css border

CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇一.CSS边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色.虚线.实线等样式CSS属性.同时大家可以进入码农教程提供CSS手册查看border. 二.Html原始边框与CSS边框对照 Html…

工作中遇到的浏览器差别（就不叫IE6bug了）

1.根据ie版本写css  非ie:if !IE; 仅IE:if IE; 等于:if IE 6; 大于:if gt IE 8; 大于或等于:if gte IE 8; 小于或等于: if lte IE 8; 2.关于display…

移动端遇到的问题小结--video

本篇主要是针对Android系统,所遇到的问题. 1. video的全屏处理: 这里说的全屏是指针对浏览器的全屏,而不是整个手机的全屏.要想全屏效果只需对video标签加 webkit-playsinline . 但是这样做会有一个问题:针对偏长的手机,视频会出现居中的效果.针对这种情况,可以对video加属性 object-fit:fill <video id="myvideo" src="test.mp4" webkit-playsinline=&q…

div 边框

1.四个边框border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框样式使用border-top 设置上边框,一般单独设置上边框样式使用border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用. 2.四边相同边框border简写#divcss5{border:1px solid #00F}设置了divcss5对象盒子1px像素蓝色实线边框 3.边框三个样式通常我们可以对边框设置宽度…

Java web 前端面试知识点总结

经过几家大厂面试,目前成功拿到唯品会offer,分享一下我的面试知识点总结: 耦合性:也称块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块的独立性则越差.模块间耦合高低取决于模块间接口的复杂性.调用的方式及传递的信息内聚性:又称块内联系.指模块的功能强度的度量,即一个模块内部各个元素彼此结合的紧密程度的度量.若一个模块内各元素(语名之间.程序段之间)联系的越紧密,则它的内聚性就越高. TCP/IP五层模型: 应用层:是体系结构中的最高.直接…

CSS应用的小问题总结

1.两个元素换行书写时,在实际的布局中展示为两个元素之间多了一个区间(这个区间通常是因为代码在换行时,解析会自动默认为一个空格字符),所以在实际应用时,如果想要将两个元素完全无缝隙的放置在一起并排显示时,应该注意使用浮动和定位,或者可以通过设置父级元素的font-size:0;的方法: 2.使用绝对定位或者固定定位时,会使元素脱离文档流,此时元素会在文档层的上方显示,可能导致其他元素被挡在下方,不能正常显示出来.此时就需要设置z-index来解决将脱离文档流的元素设置层级,以达到显示效果: 3.…

border.css(解决移动端1px问题)

由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft {…

HTML中表格table边框border（1px还嫌粗）的解决方案：

摘自:http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白色: 这样,就大功告成了. 第二种方法: 1.设置BORDER=0 : 2.再通过CSS,给Table加上1px的border-top,border-left: 3.然后再设置所有的td的…

移动端1px的border

移动端浏览器解决1px的底部border问题 1.使用border:1px solid #e0e0e0. 在不同设备下由于devicePixelRatio不同导致1px实际显示的长度不同.所以在移动端会显示出3px或者2px.所以不能用. 2.使用border-image.这种方法也很好,使用一个1px*1px的图片进行repeat,但是某些app内的webview版本很老,不支持这种css3属性. 3.使用:after伪元素,进行设置border-top,border的宽度设为需要的4倍然后t…

CSS预处器的对比——Sass、Less和Stylus

预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout 中文译文:http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html 作者:大漠日期:2013-01-26 点击:5177 Sas…

less，sass，stylus配置和应用教程及三者比较

less,sass,stylus配置和应用教程及三者比较 Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运行在客户端(支持IE10+,firefox,Webkit),也可以借助于Node.js在服务器端运行(支持IE6+,firefox,Webkit). 什么是CSS预处理技术?CSS预处理技术,是指用一种新语言用来为CSS 增加可编程的的特性,无需考虑浏览器的兼容性问题.你可以在 CSS 中使用变量.…

CSS预处理器的对比 — Sass、Less和Stylus

本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/,以及作者相关信息 --作者:Johnatha…

比较三个 CSS 预处理器：Sass、LESS 和 Stylus（下）

五.Mixins (混入) Mixins 有点像是函数或者是宏,当你某段 CSS 经常需要在多个元素中使用时,你可以为这些共用的 CSS 定义一个 Mixin,然后你只需要在需要引用这些 CSS 地方调用该 Mixin 即可. Sass 的混入语法: /* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */ @mixin error($borderWidt…

stylus入门教程，在webstorm中配置stylus

转载:https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined stylus特点富于表现力.具有健壮性.功能丰富.动态编码不需要写CSS的冒号.分号.大括号和LESS.SASS功能类似,会这些的入手很快安装安装node+npm环境命令行全局安装stylus cnpm i stylus@latest -g 可以在命令行输入 stylus -h 查看有哪些可以用的命令使用想将assets/css目录下的所有.styl文…

【border-1px的实现（stylus）如何在移动端设置1px的border】的更多相关文章