0
@media를 사용하여 특정 스타일의 기기를 사용하고 있습니다. 그러나 태블릿과 휴대 전화에는 문제가 있습니다. 현재 S3 및 hd 7 메모 패드 태블릿을 사용하여 내 웹 사이트의 대응 측면을 테스트하고 있습니다. S3에서 가로 모드에있을 때 콘텐츠가 서로 누적되지 않습니다. 이 기능은 내가 타블렛을 갖고 싶어하지만, 타블렛이 가로 모드 일 때는하지 않습니다. 나는 내가 뭘 잘못하고 있는지 알고 싶다. 내가 가지고있는 또 다른 문제는 꼬리말입니다. 태블릿, 휴대 전화 또는 랩톱에서 브라우저를 축소하면 이상한 간격이 생깁니다. 문제를 해결하는 방법을 알고 싶습니다. 당신반응성 CSS 문제
/***********************
GENERAL
***********************/
a {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
body {
/*font-family: 'Fabrica', 'Courier New';*/
font-family: 'Open Sans', sans-serif;
background-color:#e6e9ed;
color: #434a54;
}
#wrapper{
max-width:960px;
margin: 0 auto;
background-color: #f5f7fa;
overflow: auto; /*This fixed the wrapper background color problem that happened bc floating content*/
line-height: 1.8em;
}
#wrapper img {
border-radius:5px 20px 5px;
}
#wrapper p {
text-indent: 2.5em;
}
#banner {
margin-left: auto;
margin-right:auto;
padding: 0;
display:block;
clear:both;
}
#content {
padding:20px 40px;
padding-bottom:50px;
}
h1, h2, h3 {
font-family: 'Droid Serif', serif;
}
.selected {
color:#0B108C;
text-decoration: none;
}
/***********************
HEADER - Top image strip above banner
***********************/
#logo {
text-align:right;
max-height:100%;
max-width:100%;
padding: 10px 0px 10px 30px;
}
#header {
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-position: top;
margin: 0 auto;
max-width:960px;
}
/*Commented out for testing new header technique
#header {
margin-left: auto;
margin-right: auto;
padding: 0;
display: block;
clear: both;
font-family: 'Fabrica', Arial;
}
*******/
/***********************
NAVIGATION - Main site navigation
***********************/
nav{
background-color:#4888dc;
text-align:center;
color:blue;
max-width:960px;
margin: 0 auto;
text-align:center;
font-size:1.2em;
}
nav ul{
list-style:none;
margin:0 10px; /*Can be change later on in the design if it doesn't work*/
}
nav li{
/*Inline, mostly text. Appears in the same line, inline as the rest of the text. Block
pushes other items out of the page. Inline block maintains width and
height but is in line with other images*/
display:inline-block;
list-style:none;
padding: .4em 1.5em;
}
nav a {
font-weight: 800;
}
nav a:visited, nav a:link {
color:#f5f7fa;
text-decoration: none;
}
nav a:hover {
color:#0B108C;
text-decoration: none;
}
nav ul li a.selected { /*Highlights current page for users*/
color:#0B108C;
}
/**********************
FOOTER
**********************/
footer {
font-family: 'Open Sans', sans-serif;
max-width:950px;
background-color:#434a54;
font-size:0.75em;
clear:both;
color:#e6e9ed; overflow:auto;
margin: 0 auto;
padding:5px;
}
footer h3{
padding-left: .9em;
font-family: 'Open Sans', sans-serif;
}
footer ul {
display:inline-block;
list-style-type: none;
}
footer ul li{
list-style:none;
text-decoration:none;
margin-left: 1em;
}
footer ul li a{
color:#e6e9ed;
text-decoration:none;
}
footer a:hover {
color:#FFFFFF; /*Change hover color to make it more prominent*/
}
/**********************
RIGHT SIDE OF FOOTER
**********************/
#footer-right {
float:right;
margin-right:15px;
}
.social-icon {
display:inline-block;
width:24px;
height:24px;
margin-bottom:22.7px; /*controls height of "follow us" in footer*/
padding:1px;
border-radius: 20%;
}
/**********************
LEFT SIDE OF FOOTER
**********************/
#footer-left {
float:left;
padding-left: 2em;
text-align:left;
font-size: 1.35em;
display:inline-block;
line-height: 1.5em;
}
#footer-slogan {
font-family: 'Georgia', 'Droid Serif', sans-serif;
}
#copyright{
font-size: .75em;
text-align:left;
margin-top: 5px;
display:inline-block;
font-family: 'Open Sans', sans-serif;
}
/***********************
CONTENT TEMPLATE - Content template for all other pages
***********************/
/*Responsive.css*/
/*This is the placeholder for responsive CSS that we will implement for mobile design*/
/* Smartphones ----------- */
@media screen and (max-width: 519px){
/* Styles */
#content{
float:none;
padding:0;
width: auto;
}
img{
max-width: 100%;
height: auto;
width:auto\9; /*for ie8*/
}
body{
float:left;
font-family: 'Fabrica';
}
#logo {
margin-right:auto;
max-width: 100%;
height: auto;
padding: 0;
}
#wrapper{
margin: 0 auto;
}
#wrapper p{
text-indent: 0;
}
h1, h2, h3 {
font-family: 'Fabrica';
}
nav{
position: relative;
min-height: 40px;
}
nav ul{
position:absolute;
width: 180px;
padding: 5px,0;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(../img/menu-bar-mobile.jpg) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
nav ul:hover li{
display: block;
margin: 0 0 5px;
}
nav a:hover {
display:block;
}
nav li{
display:none;
margin:none;
}
#banner{
display: none;
}
footer{
font-family: 'Fabrica';
float:left;
}
}
/*Ipads and Tablets*/
@media screen and (min-width:520px) and (max-width: 959px) and (orientation: landscape){
footer{
font-family: 'Fabrica';
float: left;
}
body{
font-family: 'Fabrica';
}
#primary {
width: 55%;
float: left;
padding:10px;
}
#secondary {
width: 30%;
float: right;
padding:10px;
}
}
/* Desktops and laptops ----------- */
@media screen and (min-width: 1200px){
/* Styles */
#primary {
width: 55%;
float: left;
padding:10px;
}
#secondary {
width: 30%;
float: right;
padding:10px;
}
}
/*************************************
TWO COLUMN LAYOUT
Will target anything larger than average smartphone.
This is helpful for normal sized tablets, very large smartphones, and very small desktop windows.
***************************************/
@font-face {
font-family: 'Fabrica';
font-style: normal;
font-weight: 100;
src: local('Fabrica'), local('Fabrica'), url(path/Fabrica.otf) format('otf');
}
타블렛이 가로로 표시된 너비는 몇 픽셀입니까? – Gohn67
닫기 깃발이 있어야 할 자격이 있습니다. JSFiddle을 첨부하고 문제를 자세히 설명하면 더 좋습니다. 어쨌든 내가 귀하의 질문을 잘 이해한다면 어쩌면 그 장치에서 픽셀 비율에 대해 신경을 써야 할 것입니다. – QMaster
쉽게 읽고 디버깅 할 수 있도록 질문을 단순화해야합니다. 특정 문제와 관련된 코드 부분 만 포함하고 라이브 웹 사이트 [JSFiddle] (http://jsfiddle.net), [CodePen] (http://codepen.io) 또는 가능할 때마다 유사합니다. 그것은 우리가 당신을 도울 수있게합니다. 그런데 iPads의 가로 화면 크기는 1024px입니다. 최대 959px로 설정하고 있습니다. – David