zoukankan      html  css  js  c++  java
  • 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 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;
                }
            }
        }
    }
    View Code

    CSS代码:

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

    HTML代码:

    <div class="adaptive-circle">
        <div class="layout middle">
            <div>
                <h2>自适应标题</h2>
                <p>自适应结束</p>
            </div>
        </div>
    </div>

    完整demo代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <title>移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) 博客园(杨君华)</title>
    </head>
    
    <style>
        .adaptive-circle {
            margin: 50px auto 0;
            width: 80%;
            height: 0;
            padding-top: 80%;
    
            border-radius: 100%;
            border: 1px solid #000;
            box-sizing: border-box;
    
            position: relative;
        }
        .adaptive-circle .layout {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-align: center;
        }
        .adaptive-circle .layout.middle:before {
            display: inline-block;
            vertical-align: middle;
    
            content: '';
            height: 100%;
            width: 0;
            overflow: hidden;
        }
        .adaptive-circle .layout.middle div:first-child {
            display: inline-block;
            vertical-align: middle;
        }
    </style>
    
    <body>
        <div class="adaptive-circle">
            <div class="layout middle">
                <div>
                    <h2>自适应标题</h2>
                    <p>自适应介绍</p>
                </div>
            </div>
        </div>
    </body>
    </html>
    View Code

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

    例图:

    PS:转载请注明出处,博客园(杨君华)

  • 相关阅读:
    常用排序算法
    多线程基础知识 转
    转 大型项目架构演进过程
    TCP/IP 思维导图
    Java8 List字符串 去重
    docker lnmp php
    jpa 批量插入
    备忘提醒
    IntelliJ IDEA像Eclipse一样打开多个项目(转)
    IntelliJ Idea 常用快捷键列表
  • 原文地址:https://www.cnblogs.com/yangjunhua/p/5216438.html
Copyright © 2011-2022 走看看