0
携帯電話の画面のページのサイズを変更して、<href "1.htm">をクリックしようとすると、ページ内の一部のボタンのサイズを変更する際に問題が発生します。何でもする。オブジェクトのサイズを変更できません<HREF> +メディアクエリCSS
私はそれがメディアクエリの問題だと知っていますが、私はそれを解決する方法はありません。
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>DaZPlayer</title>
<link rel="stylesheet" type="text/css" href="index_files/styles.css">
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="index_files/menu.css">
</head>
<body>
<a href="1"><img class="portada" src="index_files/DaZ-Player_v2.jpg"></a>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<nav class="nav">
<input class="chk-nav" type="checkbox" id="btn-navbar" />
<label for="btn-navbar"><i class="fa fa-bars"></i></label>
<ul class="navbar">
<li><a href="#" class="casa"><i class="fa fa-home"></i>Inicio</a></li>
<li>
<!--- SI QUIERES PONER UNA FLECHA DEBES PONER CLASS lbl-nav --->
<label for="btn-subnav1">
<i class="fa fa-play-circle"></i>Canales
</label>
<input class="chk-nav" type="checkbox" id="btn-subnav1"/>
<!--- ESTO ES POR SÍ QUIERES PONER MÁS COSAS ADENTRO DE UNA
<ul class="sub-nav">
<li><a href="#">Excel básico</a></li>
<li><a href="#">Diseño web</a></li>
<li><a href="#">Computación básica</a></li>
<li><a href="#">Fundamentos de programación</a></li>
</ul>
--->
</li>
<li>
<label class="" for="btn-subnav2">
<i class="fa fa-info-circle"></i>Nosotros
</label>
<input class="chk-nav" type="checkbox" id="btn-subnav2" />
<!--- ESTO ES POR SÍ QUIERES PONER MÁS COSAS ADENTRO DE UNA
<ul class="sub-nav">
<li><a href="#">Excel básico</a></li>
<li><a href="#">Diseño web</a></li>
<li><a href="#">Computación básica</a></li>
<li><a href="#">Fundamentos de programación</a></li>
</ul> --->
</li>
<li><a href="#" class="casa"><i class="fa fa-envelope"></i>Contáctenos</a></li>
</ul>
</nav>
<!--- Ya Por fin Comenzamoz y salimos del Menu --->
<h1 class="titulo_1">Canales de TV en Vivo</h1>
<div id="contenedor1">
<br>
<a href="1" class="conexion"><img alt="" class="canales" src="img_canales/cnn.png"></a>
<a href="2" class="conexion"><img alt="" class="canales" src="img_canales/rt1.png"></a>
<a href="3" class="conexion"><img alt="" class="canales_mas_ancho" src="img_canales/todo_noticias.png"></a>
<a href="4" class="conexion"><img alt="" class="canales_mas_ancho" src="img_canales/tlx_arg.png"></a>
</div>
</body>
</html>
menu.css：
/*_________________________________________________________________
$RESET
____________________________________________________________________*/
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*_________________________________________________________________
$ESTILOS GENERALES
____________________________________________________________________*/
ul {
list-style-type: none;
}
.casa, label {
display: block;
font-size: 1.25rem;
text-decoration: none;
color: #E5E5E5;
padding: 1rem 1rem 1rem 3rem;
cursor: pointer;
-webkit-transition: all .3s ease;
transition: all .3s ease;
border-left: 4px solid rgba(255, 255, 255, 0);
}
.casa:hover, label:hover {
color: #FFB503;
border-left: 4px solid #049CF3;
}
.chk-nav {
display: none;
}
/*_________________________________________________________________
$NAV <nav class"nav"></nav>
____________________________________________________________________*/
.nav {
width: 100%;
position: absolute;
z-index: 10;
}
/*_________________________________________________________________
$NAVBAR <ul class"nav-bar"></ul>
____________________________________________________________________*/
.navbar {
width: 50%;
}
.navbar .sub-nav {
display: block;
}
.sub-nav .casa {
padding-left: 2rem;
font-size: 1rem;
}
.navbar > li {
border-top: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}
/*_________________________________________________________________
$ESTILOS PARA MODIFICAR EL LABEL SECUNDARIO DEL SUBMENU
____________________________________________________________________*/
.navbar .fa {
position: absolute;
left: 1rem;
}
/* 25BC es la flecha */
.lbl-nav:after {
content: "\25BC";
font-size: 1rem;
position: absolute;
width: 100%;
text-align: right;
left: 0;
padding-right: .75rem;
line-height: 1.5rem;
}
/*_________________________________________________________________
$ESTILOS PARA MODIFICAR EL LABEL PRINCIPAL O ICONO DE HAMBURGUESA
____________________________________________________________________*/
label[for="btn-navbar"] {
padding: .5rem 1rem .5rem 1rem;
font-size: 2rem;
text-align: left;
color: #049CF3;
background-color: #252525;
}
label[for="btn-navbar"]:hover {
color: #E5E5E5;
border-left: 4px solid transparent;
}
/*_________________________________________________________________
$ESTILOS PARA ESCONDER LA LISTA PRINCIPAL DEL MENU
____________________________________________________________________*/
.navbar {
margin-left: -100%;
height: 100vh;
-webkit-transition: all .5s ease;
transition: all .5s ease;
background-color: #252525;
}
.chk-nav:checked ~ .navbar {
margin-left: 0;
}
/*_________________________________________________________________
$ESTILOS PARA ESCONDER LOS SUBMENUS
____________________________________________________________________*/
.navbar .sub-nav {
display: none;
}
.chk-nav:checked ~ .sub-nav {
display: block;
}
/****************_________________________________________________________________*******************
$ESTILOS PARA DESKTOP MEDIAQUERYS
****************____________________________________________________________________*****************/
@media all and (min-width: 49rem) {
.casa, label {
display: block;
padding: 1rem 1.25rem;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/*_________________________________________________________________
$ESTILOS PARA NAVBAR
____________________________________________________________________*/
.navbar {
max-width: 100%;
width: 100%;
height: auto;
display: table;
table-layout: fixed;
margin: auto;
}
.navbar > li {
display: table-cell;
}
.chk-nav:checked ~ .navbar {
margin: auto;
}
/*_________________________________________________________________
$ESTILOS PARA ESCONDER EL ICONO DE HAMBURGUESA
____________________________________________________________________*/
label[for="btn-navbar"] {
display: none;
}
/*_________________________________________________________________
$ESTILOS PARA el SUBMENU
____________________________________________________________________*/
.navbar .sub-nav {
display: none;
}
.navbar > ul > li {
position: relative;
}
.chk-nav:checked ~ .sub-nav {
display: block;
}
.navbar .sub-nav {
width: 100%;
background-color: #222;
position: absolute;
}
.sub-nav .casa {
font-size: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
/*_________________________________________________________________
$ESTILOS PARA LOS ICONOS
____________________________________________________________________*/
.navbar .fa {
position: static;
padding-right: .3rem;
}
.lbl-nav:after {
top: 0;
height: 100%;
line-height: 3.5rem;
}
/*_________________________________________________________________
$ESTILOS PARA EL MENU PRINCIPAL
____________________________________________________________________*/
/* BORDES*/
.navbar > li {
position: relative;
border-top: 4px solid #049CF3;
}
.navbar > li > .casa:hover, label:hover {
border-left: 4px solid transparent;
}
}
styles.css： https://s.codepen.io/panchroma/debug/EbJdjM/jVMpogKwympk
#contenedor1 {
margin-top: 30px;
margin-right: 40px;
margin-bottom: 20px;
margin-left: 70px;
}
@media all and (max-width: 450px){
.portada{
width:100%;
}
}
h1.titulo_1 {
text-align: center;
font-size: 60px;
color: black;
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 40px;
}
/* CUANDO LA PANTALLA ES MENOR A 1000px PASARA ESTO*/
@media all and (max-width: 1000px){
.canales{
width: 155px;
height: 90px;
}
}
/* CUANDO LA PANTALLA ES MENOR A 500px PASARA ESTO*/
@media all and (max-width: 300px){
.canales{
width: 140px;
height: 70px;
display:block;
margin:auto;
}
}
/* PARA QUE NO APAREZCAEL TAMAÑO ORIGINAL CUANDO YA ESTA EXTENDIDA LA VENTANA
DEL NAVEGADOR, COLOCAS UN TAMAÑO ESTABLECIDO, EN MI CASO 160px*/
.canales{
width: 170px;
height: 100px;
margin-bottom: 25px;
margin-left: 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
}
.canales_mas_ancho{
width: 170px;
height: 100px;
margin-bottom: 25px;
margin-left: 10px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px;
}
/* CUANDO LA PANTALLA ES MENOR A 1000px PASARA ESTO*/
@media all and (max-width: 1000px){
.canales_mas_ancho{
width: 155px;
height: 90px;
}
}
/* CUANDO LA PANTALLA ES MENOR A 500px PASARA ESTO*/
@media all and (max-width: 300px){
.canales_mas_ancho{
width: 140px;
height: 70px;
display:block;
margin:auto;
}
}
https://stackoverflow.com/help/how-to-askを読んで質問を洗練してください。あなたが投稿したコードの量から理解するのは難しいです。 – mjwatts