javascript - 为什么我的一些手风琴在移动设备上的文字较小？
问题描述
body {
font-family: 'work sans', Arial, sans-serif;
font-size: 14px;
color: #999;
margin: 0;
padding: 0;
background-color: #010101;
background: url(https://imgur.com/YRl8KNP.png) center fixed;
background-size: cover;
text-align: left;
}
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track {
background-color: #000;
}
::-webkit-scrollbar-thumb {
background-color: #010101;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: #999;
}
#header {
padding: 160px;
}
.h_title {
font: 150px 'work sans';
color: #fff;
margin-left: 45px;
text-transform: uppercase;
}
.h_menu {
border-top: 1px solid #999;
width: 1100px;
margin: 0 auto;
padding: 20px 0;
margin-bottom: 175px;
}
.h_top {
text-align: right;
font: 12px 'work sans';
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 900;
}
.h_top::before {
content: '////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
font: 11px 'arial';
font-weight: 400;
display: block;
color: #ff00ff;
margin-bottom: 20px;
letter-spacing: 4px;
}
.h_tabs input {
display: none;
}
.h_tabs {
position: relative;
overflow: hidden;
height: 230px;
margin-top: 30px;
}
.h_tabs label {
position: absolute;
right: 0;
top: 20px;
font: 9px 'work sans';
letter-spacing: 5px;
color: #fff;
cursor: crosshair;
}
.h_tabs label:nth-of-type(2) {
top: 90px;
}
.h_tabs label:nth-of-type(3) {
top: 160px;
}
.h_tabs label b {
color: #ff00ff;
font-weight: 700;
}
.h_tabs label span {
opacity: 0;
transition: 0.6s;
}
.h_tabs label:after {
content: '001';
display: inline-block;
overflow: hidden;
width: 40px;
text-align: right;
color: #fff;
transition: 0.6s;
font-weight: bold;
}
.h_tabs label:nth-of-type(2):after {
content: '002';
}
.h_tabs label:nth-of-type(3):after {
content: '003';
}
.h_tabs input:checked+label span {
opacity: 1;
transition: 0.6s;
}
.h_tabs input:checked+label::after {
width: 0;
transition: 0.6s;
}
.h_tab1,
.h_tab2 {
width: 700px;
position: absolute;
left: 50px;
top: 50px;
opacity: 0;
}
.h_blurb {
font: 14px 'work sans';
color: #ccc;
letter-spacing: 1px;
}
.h_cont {
background: #171717;
padding: 20px;
margin-top: 25px;
overflow: hidden;
display: inline-block;
}
.h_nav a {
display: inline-block;
position: relative;
width: 180px;
margin: 0 35px 15px 0;
border-bottom: 1px solid #333;
padding: 6px;
font: 12px 'share tech mono';
text-transform: uppercase;
letter-spacing: 1px;
color: #aaa;
}
.h_nav a::after {
content: '';
width: 15px;
height: 2px;
position: absolute;
left: 0;
bottom: -1px;
background: #ff00ff;
transition: 0.5s;
}
.h_nav a:nth-of-type(2n):after {
background: #ff00ff;
}
.h_nav a:nth-of-type(3n):after {
background: #ff00ff;
}
.h_nav a:hover:after {
width: 180px;
transition: 0.5s;
}
#htab1:checked~.h_tab1,
#htab2:checked~.h_tab2 {
opacity: 1;
z-index: 2;
}
#lean_overlay {
position: fixed;
z-index: 99;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(https://i.imgur.com/zdXP0Uo.jpg) center fixed;
background-size: cover;
display: none;
}
#Pages #wrapper {
background: transparent;
}
#page_container {
width: 1100px;
overflow: hidden;
padding: 15px 0;
margin: 15px 0;
}
.page_menu {
font: 12px 'share tech mono';
width: 220px;
margin-right: 50px;
margin-left: 12px;
float: left;
}
.page_menu a:active {
color: #ff00ff;
}
.page_menu h1 {
font: 17px 'work sans';
font-weight: 700;
text-transform: lowercase;
color: #fff;
margin: 30px 0 10px 0;
}
.page_menu h1:before {
content: '/ ';
font-weight: 300;
margin-right: 5px;
color: #ccc;
}
.page_content {
background: #171717;
width: 705px;
float: left;
outline: 1px solid rgb(255 255 255 / 0.2);
outline-offset: 10px;
padding: 50px;
text-align: justify;
line-height: 150%;
}
.page_content h1 {
font: 50px 'work sans';
text-transform: uppercase;
font-weight: 300;
color: #fff;
overflow: hidden;
text-align: left;
display: block;
letter-spacing: 1px;
}
.page_content h2 {
font: 15px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
font-weight: bold;
font-style: italic;
margin: 10px 0;
color: #ff00ff;
}
.page_text {
padding: 20px 50px;
}
.page_text u {
color: #fff;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
text-decoration: none;
font-size: 12px;
}
.page_em {
margin-top: 25px;
font: 12px 'share tech mono';
line-height: 17px;
border: #333 solid 1px;
padding: 30px;
}
.page_em u {
color: #ff00ff;
font-style: normal;
font-size: 12px;
letter-spacing: 0;
line-height: 17px;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
}
.page_menu ol {
counter-reset: item;
margin: 0;
padding-left: 10px;
}
.page_menu li ol {
padding-left: 15px;
}
.page_menu b {
color: #ff00ff;
font-weight: bold;
}
.page_menu ol li {
display: block;
}
.page_menu li:before {
content: counters(item, ".") ". ";
counter-increment: item;
font-size: 9px;
line-height: 25px;
color: #ff00ff;
}
.sub_canons li {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font: 7px 'work sans';
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px 0;
margin-bottom: 10px;
}
.sub_canons {
list-style-type: none;
margin: 30px 0;
padding-left: 50px;
}
.sub_canons li b {
display: block;
font: 10px 'share tech mono';
}
.page_content h3 {
font: 14px 'share tech mono';
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0;
color: #fff;
counter-increment: faqcounter;
}
.page_content h3::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 12px;
color: #ff00ff;
}
.page_content h4 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0;
color: #fff;
counter-increment: faqcounter;
}
.page_content h4::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff1053;
}
.page_content h5 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0;
color: #fff;
counter-increment: faqcounter;
}
.page_content h5::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #4592f7;
}
.page_content h6 {
font: 13px 'share tech mono';
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px 0;
color: #fff;
counter-increment: faqcounter;
}
.page_content h6::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 10px;
color: #ff5f32;
}
a.user-tagged.mgroup-4 {
color: #744dba;
}
a.user-tagged.mgroup-8 {
color: #ff1053;
}
a.user-tagged.mgroup-6 {
color: #4592f7;
}
a.user-tagged.mgroup-7 {
color: #ff5f32;
}
.iconpad {
padding: 10px;
border: #222 solid 1px;
margin-right: 10px;
float: left;
margin-top: 5px;
}
.padex {
padding: 10px;
text-align: justify;
}
::-moz-selection {
color: #ff00ff;
}
::selection {
color: #ff00ff;
}
faqentry {
font: 12px 'share tech mono';
width: 220px;
margin-right: 50px;
margin-top: 55px;
margin-left: 12px;
padding-bottom: 15px;
float: left;
}
faqentry ol li {
margin: 10px 15px 10px 10px;
padding-left: 1px;
font-size: 9px;
color: #ff00ff;
}<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
font-family: 'share tech mono';
font-size: 14px;
text-align: justify;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px -5px 0px -5px;
color: #fff;
background: none;
border: none;
transition: 0.4s;
counter-increment: faqcounter;
}
.accordion:focus {
outline: 0 !important;
}
.accordion::before {
content: '00' counter(faqcounter, decimal-leading-zero);
margin-right: 12px;
color: #ff00ff;
}
div.panel {
margin-top: 10px;
border: #333 solid 1px;
display: block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel__content {
padding: 30px;
line-height: 170%;
}
</style>
<link rel="shortcut icon" href="HERE">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,900|Share+Tech+Mono" rel="stylesheet">
<title>STICTION</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<LINK REL=StyleSheet HREF="STICTION.css" TYPE="text/css">
</head>
<div id="header">
<div class="h_title">stiction</div>
<div class="h_menu">
<div class="h_top"></div>
<div class="h_tabs">
<input id="htab1" type="radio" name="htabs" checked>
<label for="htab1"><span>CANDY TEETH, NEON IDIOTS.</span> <b>/</b></label>
<input id="htab2" type="radio" name="htabs">
<label for="htab2"><span>OTHER LINKS</span> <b>/</b></label>
<div class="h_tab1">
<div class="h_blurb"><i>Welcome to the new world; myth meets the future. Where do you fit in?</i><br><br>
<span style="text-transform: uppercase; font-family: share tech mono; font-size: 11px;">literate supernatural and cyberpunk group roleplay set in City 0215 during the year 2447.</span>
</div>
</div>
<div class="h_tab2">
<div class="h_nav">
<a href="https://discord.gg/2Rrw9QB">DISCORD</a>
<a href="http://GOOGLELINKHERE.com">DIRECTORY</a>
<a href="https://open.spotify.com/playlist/1euBOWkTE7hnMCsPgBFlqM">PLAYLIST</a>
</div>
</div>
</div>
</div>
<div id="page_container">
<div class="page_menu">
<ol>
<li><a href="/PAGETITLE.html">INDEX</a></li>
</ol>
<h1>ESSENTIAL READS</h1>
<ol>
<li><a href="/PAGETITLE.html">QUICK-START GUIDE</a></li>
<li><a href="/RULES.html">RULES</a></li>
<li><a href="/PAGETITLE.html">HISTORY</a></li>
<li><a href="/PAGETITLE.html">SETTING</a></li>
<li><a href="/PAGETITLE.html">SPECIES</a></li>
<ol>
<li><a href="/PAGETITLE.html">LIVING</a></li>
<li><a href="/PAGETITLE.html">DECEASED</a></li>
<li><a href="/PAGETITLE.html">PURGATORIC</a></li>
</ol>
</ol>
<h1>IN-DEPTH CONTENT</h1>
<ol>
<li><span style="color: #ff00ff; font-weight: bold;">FAQ</span></li>
<li><a href="/PAGETITLE.html">SUBPLOTS</a></li>
<ol>
<li><a href="/PAGETITLE.html">SUBPLOT 001</a></li>
<li><a href="/PAGETITLE.html">SUBPLOT 002</a></li>
<li><a href="/PAGETITLE.html">SUBPLOT 003</a></li>
</ol>
<li><a href="/PAGETITLE.html">OFFICIAL SERVER FACTIONS</a></li>
<li><a href="/PAGETITLE.html">MEMBER-CREATED FACTIONS</a></li>
</ol>
</div>
<div class="page_content">
<div class="page_text" id="top">
<h1>lore questions</h1>
<div class="page_em"><u>A NOTE</u> This world- the world of <u style="color : #fff;
text-transform : uppercase;
font-weight : 700;
letter-spacing : 1px;
text-decoration : none;
font-size : 12px;">STICTION</u>- isn't just the project and product of the staff team. We want you to feel that you can contribute to this world! To that end, these are all questions that guests and members have asked in the server. Questions are either
answered according to existing/established lore, or (in cases where the staff team hasn't thought of said situation or scenario) are talked out with members to come to a satisfying answer.
<p>
This page is updated regularly, so make sure you keep an eye on it!
<p>
It's probably easiest to explore this page using the <b>CRTL+F</b> function, especially if you have specific questions. There are also quick links to help you find relevant sections faster.</div>
<faqentry id="quick links">
<ol>
<li><a href="#section"><u>world-building</u></a></li>
<li><a href="#section2"><u>subplots</u></a></li>
<li><a href="#section3"><u>species-specific</u></a>
<ol>
<li><a href="#abilities"><u>general abilities</u></a></li>
<li><a href="#witches"><u>witches</u></a></li>
<li><a href="#shifters"><u>shifters</u></a></li>
<li><a href="#vampires"><u>vampires</u></a></li>
<li><a href="#reapers"><u>reapers</u></a></li>
<li><a href="#ghosts"><u>ghosts</u></a></li>
<li><a href="#phoenixes"><u>phoenixes</u></a></li>
<li><a href="#familiars"><u>familiars</u></a></li>
<li><a href="#androids"><u>androids</u></a></li>
</ol>
</ol>
</faqentry>
<Br><br>
<h3>context clues</h3>
Before you get started exploring this new world, it's helpful to keep in mind a few things to help you get a feel for everything. (It might even help you answer your own questions, who knows?)
<p>
The first bit of info you'll need is that electricity and all other forms of energy are obsolete; instead, the world runs on <i>magic</i> which is "refined" into modern power. That leads into point two, which is that supernatural/magic creatures
are no longer monsters under the bed, or creatures in the shadow; they live open, public lives.
<p>
Since this is a cyberpunk site, it stands to reason that technology is significantly more advanced than what we have now. It's not so advanced that regular interstellar travel exists, but it's so much farther ahead that paper (and privacy, most sickness,
and rustic creature comforts for that matter) is a thing of the past. Every person on the planet is in some way connected to the Global Communications Lattice (or GCL for short), and everything on the planet is connected/hooked up/linked to
it.
<p>
As far as specific pieces of technology go, that's largely up to you, your ideas, and genre standards.
<p>
It never hurts to ask an admin or run an idea by us before executing an idea, though!<br><br>
<a name="section"> </a>
<h2>world-building</h2>
<button class="accordion">What's the primary language spoken in City 0215? What about the rest of the world?</button>
<div class="panel">
<div class="panel__content">English, Russian, and Chinese are the most common languages spoken in City 0215, though Czech isn't uncommon.
<p>
English has become the global <i>lingua franca</i>, but thanks to freely accessible knowledge, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing;
most people know more than one language, and those that don't have a universal translator.</div>
</div>
<button class="accordion">What's the internet like now?</button>
<div class="panel">
<div class="panel__content">The internet has become integral to every single facet of life. People still call it the internet, but it's official name is the <u>Global Communication Lattice</u>, or <u>GCL</u> for short. Some people also call it <u>the rabbithole</u>,
given its tendency to consume people’s entire lives. In true opportunistic capitalist fashion, the official mascot of the GCL (and the new Clippy) is a little white rabbit.
<p>
It looks relatively the same in 2447 as it did in the twenty-first century; video streaming and vlogging exists, social media is still around, and everything you could possibly want is online. It's also much more, with literally anything you could need
or want to do at the tips of your fingers.</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>我在网页上创建了一些手风琴问题，它们在桌面上运行得非常好。但是，当切换到移动设备时，仅使用一行文本的问题的字体大小要比使用两行或多行文本的问题小。
我尝试使用元标记进行动态缩放，但它不会影响看起来更小的问题。
从本质上讲，我希望每个问题都以 14 像素字体显示，而不是在移动设备上看起来更小。
编辑：我添加了一个片段，包括我所有的 CSS（不幸的是），因为我真的不知道什么元素可能会影响它。我已经包含了一个长问题和一个短问题来比较这个问题。
<button class="accordion">What is healthcare like?</button>
<div class="panel">
<div class="panel__content">Healthcare, considered an inalienable human right, is standardized and freely available. Nearly every street corner has a "doc-in-a-box" station, where a person can step inside a metal tube and be diagnosed/healed.<p>
That being said, complicated issues- like debris in wounds, chronic diseases, or anything else involved- still require actual physicians. Large hospitals still exist, but they're less common and really only suited for emergencies or critical situations.<p>
Unfortunately, it's still true that the more money you have, the quicker and better quality your care is.
</div>
</div>
<style>
.accordion {
font-family: 'share tech mono';
font-size: 14px;
text-align: justify;
text-transform: lowercase;
letter-spacing: 1px;
margin: 20px -5px 0px -5px;
color: #fff;
background: none;
border: none;
transition: 0.4s;
counter-increment : faqcounter;
}
.accordion:focus {outline:0 !important;}
.accordion::before {
content : '00' counter(faqcounter,decimal-leading-zero);
margin-right : 12px;
color : #ff00ff;
}
div.panel {
margin-top: 10px;
border : #333 solid 1px;
display:block;
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel__content {
padding:30px;
line-height: 170%;
}
</style>
解决方案
推荐阅读
- python - 文件名未知时在python中访问CSV
- r - 如何按行比较数据框中的两个均值列表
- c# - 抛出的异常：带有 Google Speech API 的 System.Private.CoreLib.dll 中的“Grpc.Core.RpcException”
- entity-framework - 不使用 OnConfiguring(DbContextOptionsBuilder optionsBuilder) 无法构造 DbContext
- coq - IndProp：re_not_empty_correct
- angular - 如何将指纹扫描仪与前端 Angular 和后端 .NET (c#) Web App 集成
- c# - 使用 nuget pack 解决具有一些不安全代码的解决方案时出现错误
- javascript - 如何在 React/Node 中按顺序处理 api 调用承诺
- typescript - 类型“布尔”不可分配给“假”类型
- wpf - 如何正确设置此按钮与父 ListView ItemsControl 的绑定？