/*各界面共用部分开始*/ * { font-family: '微软雅黑'; } body{margin: 0px;padding: 0px;} .standard-main, .science-main, .programmer-main { margin: 0px; } ul { list-style: none; margin: 0px; padding: 0px; } li { float: left; text-align: center; cursor: pointer; } li img { height: 14px; } .title { height: 30px; line-height: 30px; } .result { height: 120px; text-align: right; } .second { font-size: 40px; font-weight: bold; padding-right: 10px; } .pre { color: #a7a7a7; padding-right: 10px; } /*计算器类型*/ .type { height: 20px; text-align: left; margin-left: 10px; font-weight: bold; margin-top: 10px; cursor: pointer; } /*类型选择侧边栏*/ .type-bar { display: none; height: 90px; width: 100px; position: absolute; top: 35px; background-color: #e6e6e6; } .type-bar li { float: left; width: 100px; text-align: center; line-height: 30px; } .active { background-color: #cfcfcf; } /*数字加粗*/ .number { font-weight: bold; } /*共用部分结束*/ /*计算器标准版界面开始*/ .standard-main { width: 350px; height: 480px; overflow: hidden; } #std-top-symbol { border-top: 1px #a7a7a7 solid; height: 52px; } #std-num-symbol { background-color: #e6e6e6; height: 270px; font-size: 20px; } #std-top-symbol li, #std-num-symbol li { line-height: 52px; width: 87.5px; } /*标准界面结束*/ /*科学型界面开始*/ .science-main { display: none; width: 350px; } .sci-result { height: 120px; text-align: right; } #sci-top-symbol { border-top: 1px #a7a7a7 solid; height: 135px; } #sci-top-symbol li, #sci-num-symbol li { line-height: 45px; width: 70px; } #sci-num-symbol { height: 235px; background-color: #e6e6e6; } /*科学型界面结束*/ /*程序员型界面开始*/ .programmer-main { display: none; width: 350px; } .pro-result { height: 220px; text-align: right; } #pro-top-symbol { border-top: 1px #a7a7a7 solid; height: 45px; } #pro-top-symbol li { line-height: 45px; width: 58px; } #pro-num-symbol li { line-height: 45px; width: 70px; } #pro-num-symbol { height: 235px; background-color: #e6e6e6; } /*四个进制*/ #pro-scales { margin-left: 20px; } #pro-scales div { text-align: left; margin-top: 5px; cursor: pointer; } /*当前使用的进制*/ .scale-active { color: cornflowerblue; } /*按键不可用*/ .disable-btn { color: #cacaca; } /*程序员型界面结束*/ @media screen and (max-width: 450px) { html, body { height: 100%; padding: 0px !important; } .standard-main, .science-main, .programmer-main { width: 100%; height: 100%; } .result, .sci-result { height: 150px; } #std-top-symbol { display: flex; justify-content: space-evenly; } #std-num-symbol { height: calc(100% - 150px - 52px); display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; } #sci-top-symbol, #pro-top-symbol { display: flex; justify-content: space-evenly; flex-wrap: wrap; } #sci-num-symbol { height: calc(100% - 150px - 135px); } #pro-num-symbol { height: calc(100% - 220px - 45px); } #sci-num-symbol, #pro-num-symbol { display: grid; grid-template-columns: repeat(5, 1fr); place-items: center; } }