在安卓手机中rem单位border-radius:50%画圆变形的解决方案

i{
       display: inline-block;
       width: .08rem;
       height: .08rem;
       background-color: #D0021B;
       border-radius: 50%;
       /*border-radius: .08rem;*/
 };使用border-radius:50%,或者border-radius的值与宽高相等,都可实现一个完美的圆形,但是在不同的安卓手机中,会有不同程度的变形(有的扁圆,有的大,有的小);当使用px做为宽高的单位,border-radius:50%画出来的圆是不会变形的;但使用rem时,rem在换算为px时,会是一个带小数点的值,安卓对小于1px的做了处理(不同浏览器对小于1px的处理方式不同,有的采用四舍五入,有的大于某个值展示1px否则就舍去),从而导致圆角不圆;在ios下就没有这个问题。

解决方案:

  1. 很多文章指出直接用px, 但是这样做无法达到适配的目的
  2. 还有的说设置一个很大的值:border-radius:9999px,亲测不行(如:华为)
  3. 使用svg, 既可以适配,即使再小的圆形也能在不同屏幕上完美展示,但又很麻烦

推荐之法:

  i{
       display inline-block
       width .16rem
       height .16rem
       background-color #D0021B
       border-radius 50%
       transform scale(.5)
       transform-origin: 0% center
   }先把width,height的值放大一倍,然后用transform scale(.5)缩小一倍,接着用transform-origin调整下圆的位置就大功告成了!

原文地址:https://www.cnblogs.com/w190/p/11707029.html

时间: 2024-10-08 10:47:29

在安卓手机中rem单位border-radius:50%画圆变形的解决方案的相关文章

rem单位border-radius:50%在安卓手机中画圆变形

i{ display: inline-block; width: .08rem; height: .08rem; background-color: #D0021B; border-radius: 50%; /*border-radius: .08rem;*/ }; 使用border-radius:50%,或者border-radius的值与宽高相等,都可实现一个完美的圆形,但是在不同的安卓手机中,会有不同程度的变形(有的扁圆,有的大,有的小):当使用px做为宽高的单位,border-radiu

安卓手机中wifi密码查看器,查看wifi密码教程

市场上有很多查看wifi密码的软件,都是只能查看本地已经连过的wifi密码而已,大家都觉得没啥用, 但是呢 我告诉大家,确实能用的, 只是您不会使用而已. 大家都知道<wifi万能钥匙>,<wifi伴侣>,<360的wifi>等软件都能让您免费连wifi, 但是不会显示密码是多少, 那么这时候<查看wifi密码>这种软件就有作用了, 直接查看之前用wifi万能钥匙啥的连过的密码, 然后你就能快乐的玩耍啦! 但是使用<查看wifi密码>等软件需要r

Windows环境中,通过Charles工具,抓取安卓手机、苹果手机中APP应用的http、https请求包信息

Windows环境中,通过Charles工具,抓取安卓手机.苹果手机中APP应用的http.https请求包信息1.抓取安卓手机中APP应用的http请求包信息1)在电脑上操作,查看Windows机器IP地址:cmd->ipconfig 在返回的结果中,查询得到IPv4地址. a)如果你的Windows机器是通过无线方式上网,则选择 无线局域网适配器 中的IPv4中IP地址. b)如果你的Windows机器是通过有线方式上网,则选择 以太网适配器 中的IPv4中IP地址. 2)在手机上操作,在你

安卓手机软件測试耗电量

欢迎大家转载,为保留作者成果,转载请注明出处,http://blog.csdn.net/netluoriver,有些文件在资源中也能够下载! 假设你没有积分,能够联系我索要! 我是做多媒体调度的,须要在安卓手机中測试调度软件的在视频通讯时手机的能够支撑的时长,在网上找了非常多測试电量的软件都不惬意! 在google中查找也没有找出一个好的方案来,近期在測试的时候突然发现手机中带有一个电量的历史纪录的功能.真是"踏破铁鞋无觅处,得来全不费工夫".測试就是这样,要学会善于发现! 来说下手机

进阶篇-安卓系统:3.初识安卓手机内置传感器

在第二代智能手机问世之后,安卓手机中的传感器就变得越来越多了. 这次笔记就认识一下安卓内置传感器的种类吧. 如果想要获取安卓手机中所有的内置传感器的名字: import android.hardware.Sensor; import android.hardware.SensorManager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.List; pub

安卓手机软件测试耗电量

欢迎大家转载,为保留作者成果,转载请注明出处,http://blog.csdn.net/netluoriver,有些文件在资源中也可以下载!如果你没有积分,可以联系我索要! 我是做多媒体调度的,需要在安卓手机中测试调度软件的在视频通讯时手机的可以支撑的时长,在网上找了很多测试电量的软件和方案都不满意!在google中查找也没有找出一个好的方案来,最近在测试的时候突然发现手机中带有一个电量的历史纪录的功能,真是"踏破铁鞋无觅处,得来全不费工夫",测试就是这样,善于发现!经常寻觅! 来说下

如何在你的安卓手机上运行Windows XP?

?? 如何在你的安卓手机上运行Windows XP? 原理很简单:用虚拟机运行在安卓手机中,然后把Windows XP运行在虚拟机里面.这个虚拟机怎么做呢,用"BOCHS"的电脑版XP安装好之后再把影像文件放到安卓上,使用安卓版BOCHS运行XP. 详细步骤可以参考: http://www.techulator.com/resources/7523-How-Run-Windows-XP-Android.aspx 或者 http://www.androidgyan.com/how-to-

如何在手机项目中使用rem单位

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一

手机自适应的单位rem,与自适应网页的区别

一个网站有的会分为pc站和移动站,有的网站只有pc站,而现在更多的是自适应的站点.现在针对自适应的网页设计有很多模板,如bootstrap,它会让你轻松定制一个只适应网站,而现在大多数的网站并不是靠程序员凭空开发的前端与后端,都会运用已经成熟的框架创建自己的网站,如一些集成很好的wordpress框架,和织梦dede等.自适应的页面,只需要监测不同的屏幕尺寸,使用@media(),写出不同尺寸下的不同尺寸即可. 而现在更多的人使用手机,这就使网页的用户体验度更好,很多大公司都会采用pc站和移动站