移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css

来源：动视网责编：小采时间：2020-11-27 16:20:20

移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css

移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css_WEB-ITnose:序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用 LESS代码： .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius

推荐度：

点击下载本文 文档为doc格式

导读移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css_WEB-ITnose:序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用 LESS代码： .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius

序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用

LESS代码：

.adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } position: relative; .layout { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; text-align: center; &.middle { &:before { display: inline-block; vertical-align: middle; content: ''; height: 100%; width: 0; overflow: hidden; } div:first-child { display: inline-block; vertical-align: middle; } } }}

CSS代码：

HTML代码:

自适应标题

自适应结束

完整demo代码：

   移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) 博客园(杨君华) 自适应标题
 自适应介绍

示例链接：http://jsbin.com/wazovezima/edit?html,output

例图：

移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css

推荐度：

点击下载本文 文档为doc格式

标签：手机屏幕实现 html

热门焦点

移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css

移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css

自适应标题

自适应标题

移动端css实现自适应正圆(宽高随着手机屏幕宽度自适应)_html/css

最新推荐

猜你喜欢

热门推荐