0
我在D3.js中構建了一個世界地圖，一切工作都很完美，我需要的唯一幫助就是地圖在不同屏幕尺寸上的響應能力。這裏是我已經精選了世界地圖的鏈接： https://digitalxlabs.com/animated-banners/worldmap-final.php無法讓移動設備響應
用戶名：DXLdemo 密碼：查看@ 098＃
請建議我應如何更新我的CSS代碼，使這項工作完美地響應模式。
下面是CSS文件：提前
.country:hover {
stroke: #B3B5B3;
stroke-width: 3px;
}
span1 {
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
}
span2 {
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
}
.text {
font-size:14px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
}
.point {
padding: 2px 2px 2px 2px;
}
#container {
margin-top:20px;
height: 60.2%;
overflow:hidden;
background: #e8e9e8;
width:100%;
}
div .fixed {
position: fixed;
/*left: 68.9%;
top: 61.8%;*/
margin-right:10px;
right:0;
width: 23%;
z-index:1;
/*opacity:0.9;
background-color:white;
*/}
div .fixed2{
position:fixed;
}
/*@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px) and (min-device-width: 375px) and (orientation: landscape) {
}*/
@-moz-document url-prefix() {
div .fixed {
left:75.8%;
/*top:59%;*/
}
.white-overlay{
top:59%;
}
div#container{
height:57.2% !important;
}
p#manualtip{
margin-top:16px !important;
}
.manualtooltip{
top:18% !important;
}
.kicker{
font-size:15px;
}
}
/* @media screen and (min-device-width: 1280px) and (max-device-width: 1280px) {
div .fixed {
top:62%;
margin-right:10px;
}
}*/
/* (1920x1080) Full HD Display */
/*@media screen and (min-device-width: 1680px) and (max-device-width: 1920px) {*/
/* insert styles here */
/*}*/
/*@media screen and (min-device-width: 1024px) and (max-device-width: 1024px) {*/
/* insert styles here */
/*div .fixed {
top: 74%;
margin-right: 16px;}
}*/
/*@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) and (min-device-width: 320px) and (orientation: landscape) {
.buttons-size {
width: 2em !important;
height: 2em !important;
text-align:center !important;
}
#container{
height: 59%;
}
}*/
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.manualtooltip {
z-index: 11;
background-color: white;
right: 0;
top: 2% !important;
margin-right: 10px;
opacity: 0.9;
padding: 3px !important;
width: 205px !important;
height: 28%;
margin-bottom: 10px;
visibility: hidden;
background-color: white;
}
.manualheading{
font-size: 10px !important;
}
p#manualparatip {
font-size: 8px !important;
}
div#closetip {
right: 0;
margin-right: 25px !important;
padding-left: 140px !important;
margin-top: -38px !important;
}
p#manualtip {
font-size: 10px !important;
float: right;
margin-right: 8px !important;
margin-top: 11px !important;
color: #056ab5;
}
.atail {
position: absolute;
display: inline-block;
border-width: 20px;
border-style: solid;
border-color: #cccccc transparent transparent transparent;
width: 0px;
height: 0px;
margin-right: 8px !important;
right: 0;
margin-top: -13px !important;
}
.buttons-size {
width: 2em !important;
height: 2em !important;
text-align:center !important;
}
#container{
height: 46% !important;
}
div .fixed {
/* top: 28.1%; */
left: 20.13% !important;
width: 79% !important;
}
.kicker {
font-size: 10px !important;
color: black;
margin-left: 48px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 19px;
}
. breaks li{
margin-top: -2px !important;
}
.white-overlay{
top: 33% !important;
height: 16% !important;
}
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.manualtooltip {
z-index: 11;
background-color: white;
right: 0;
top: 2% !important;
margin-right: 10px;
opacity: 0.9;
padding: 3px !important;
width: 205px !important;
height: 28%;
margin-bottom: 10px;
visibility: hidden;
background-color: white;
}
.manualheading{
font-size: 10px !important;
}
p#manualparatip {
font-size: 8px !important;
}
div#closetip {
right: 0;
margin-right: 25px !important;
padding-left: 140px !important;
margin-top: -38px !important;
}
.atail {
position: absolute;
display: inline-block;
border-width: 20px;
border-style: solid;
border-color: #cccccc transparent transparent transparent;
width: 0px;
height: 0px;
margin-right: 8px !important;
right: 0;
margin-top: -13px !important;
}
.buttons-size {
width: 2em !important;
height: 2em !important;
text-align:center !important;
}
#container{
height: 46% !important;
}
p#manualtip {
font-size: 10px !important;
float: right;
margin-right: 8px !important;
margin-top: 11px !important;
color: #056ab5;
}
div .fixed {
/* top: 28.1%; */
left: 20.13% !important;
width: 79% !important;
}
. breaks li{
margin-top: -2px !important;
}
.kicker {
font-size: 10px !important;
color: black;
margin-left: 48px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 19px;
}
.white-overlay{
top: 33% !important;
height: 16% !important;
}
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
/* p#manualtip {
font-size: 10px !important;
margin-right: 176px !important;
margin-top: 4px !important;
margin-left: 0px;
margin-bottom: 5px !important;
float: right;
}
div .fixed {
/* top: 28.1%; */
/*left: 56.13% !important;
width: 72% !important;
}
.white-overlay {
top: 62% !important;
height: 16.5% !important;
}
#container {
height: 76% !important;
}
ul.breaks{
margin-left: -24px !important;
margin-right: 169px !important;
margin-top: 4px !important;
}*/
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here
/* insert styles here */
.atail {
margin-right: 24px;
margin-top: -4px ;
}
p#manualtip {
margin-left: -96px ;
margin-top:13px;
margin-right: 175px ;
}
div .fixed{
width: 35% ;
left: 73% ;
}
.kicker{margin-left: 38px ;}
/*div .fixed{
width:25% !important;
}
.atail{
margin-top: -10px 1important;;
}
.white-overlay{
top: 51.5% !important;
}
*/
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
/*top: 26.1%;*/
left: 35.13%;
width: 45%;
}
.white-overlay{
background-color: white;
width: 100%;
top: 36% !important;
position: fixed;
z-index: 9999;
height: 8.4% !important;
}
p#manualtip {
font-size: 10px !important;
float: right !important;
margin-right: -63px !important;
margin-top: 4px !important;
color: #056ab5;
}
.buttons-size {
width: 2em !important;
height: 2em !important;
text-align:center !important;
}
#container{
height: 41% !important;
}
/*p#manualtooltip{
font-size:11px !important;
margin:right:20px !important;
margin-top:10px !important;
}*/
.kicker {
font-size: 10px !important;
margin-left: 47px !important;
margin-bottom: 0px !important;
/* margin-right: 40px; */
margin-top: 5px;
}
.manualtooltip {
z-index: 1;
right: 0;
top: 1.8% !important;
margin-right: 10px;
opacity: 0.9;
width: 209px !important;
height:29% !important;
padding-left: 4px;
margin-bottom: 10px;
background-color: white;
}
.manualheading{
font-size: 8.5px !important;
}
p#manualparatip {
font-size: 8.5px !important;
}
div#closetip {
font-size:8px !important;
right: 0;
margin-right: 25px;
padding-left: 150px !important;
margin-top: -35px !important;
}
.atail{
margin-right: 13px !important;
margin-top: -10px !important;
}
/*ul.breaks{
margin:4px;
list-style:initial;
margin-left:-100px;
margin-top:10px;
}*/
ul.breaks {
margin: 1px !important;
list-style: initial;
margin-left: 8px !important;
margin-right: 3px !important;
/* float: right; */
margin-top: 12px !important;
}
.breaks li{
float:left;
height:30px;
margin 0px 2px 0px 0px;
position:relative;
width:15%;
}
.bar{
width:150%;
height:8px;
}
.dtext{
margin-top:3px;
font-size:9px;
}
/*.buttons-size{
-webkit-border-radius: 0;
-webkit-appearance: none;
}*/
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
div .fixed {
/*top: 26.1%;*/
left: 35.13%;
width: 45%;
}
.white-overlay{
background-color: white;
width: 100%;
top: 36% !important;
position: fixed;
z-index: 9999;
height: 8.4% !important;
}
p#manualtip {
font-size: 10px !important;
float: right !important;
margin-right: 8px !important;
margin-top: 4px !important;
color: #056ab5;
}
.buttons-size {
width: 2em !important;
height: 2em !important;
text-align:center !important;
}
#container{
height: 41% !important;
}
/*p#manualtooltip{
font-size:11px !important;
margin:right:20px !important;
margin-top:10px !important;
}*/
.kicker {
font-size: 10px !important;
margin-left: 47px !important;
margin-bottom: 0px !important;
/* margin-right: 40px; */
margin-top: 5px;
}
.manualtooltip {
z-index: 1;
right: 0;
top: 1.8% !important;
margin-right: 10px;
opacity: 0.9;
height:29% !important;
width: 209px !important;
padding-left: 4px;
margin-bottom: 10px;
background-color: white;
}
.manualheading{
font-size: 8.5px !important;
}
p#manualparatip {
font-size: 8.5px !important;
}
div#closetip {
font-size:8px !important;
right: 0;
margin-right: 25px;
padding-left: 150px !important;
margin-top: -35px !important;
}
.atail{
margin-right: 13px !important;
margin-top: -10px !important;
}
/*ul.breaks{
margin:4px;
list-style:initial;
margin-left:-100px;
margin-top:10px;
}*/
ul.breaks {
margin: 1px !important;
list-style: initial;
margin-left: 8px !important;
margin-right: 3px !important;
/* float: right; */
margin-top: 12px !important;
}
.breaks li{
float:left;
height:30px;
margin 0px 2px 0px 0px;
position:relative;
width:15%;
}
.bar{
width:150%;
height:8px;
}
.dtext{
margin-top:3px;
font-size:9px;
}
/*.buttons-size{
-webkit-border-radius: 0;
-webkit-appearance: none;
}*/
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
div .fixed {
/*top: 64%;*/
left: 62.13%;
width: 52%;
}
.white-overlay{
top: 70% !important;
height: 16.5% !important;
}
.text {
font-size:10px;
}
#container {
height: 74.2% !important;
}
div#zoombutton{
top:7% !important;
}
.buttons-size {
width: 2em !important;
height: 2em !important;
text-align:center !important;
}
.manualtooltip{
top: 11% !important;
width: 216px !important;
height: 43% !important;
}
div#closetip{
margin-top: -38px !important;
}
.atail{
margin-top: -8px !important;
}
p#manualtip{
font-size: 10px !important;
margin-right: 106px !important;
margin-top: 5px !important;
margin-left: -13px;
float: right;
}
.kicker{
font-size: 10px !important;
margin-left: 16px !important;
margin-top: 5px;
}
ul.breaks{
margin:36px;
margin-left: -24px !important;
margin-right: 101px !important;
margin-top: 4px !important;
}
.dtext{
font-size:10px;
}
/*.buttons-size{
-webkit-border-radius: 0;
-webkit-appearance: none;
}
*/
}
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
div .fixed{
width: 41% !important;
}
#container{
height: 43.2% !important;
}
.white-overlay{
top: 35.2% !important;
}
div#closetip{
margin-top: -25px !important;
}
.atail{
margin-top: -12px !important;
}
.manualtooltip{
top:5% !important;
height:25.5% !important;
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
div .fixed{
width: 41% !important;
}
#container{
height: 43.2% !important;
}
.white-overlay{
top: 35.2% !important;
}
div#closetip{
margin-top: -25px !important;
}
.atail{
margin-top: -12px !important;
}
.manualtooltip{
top:5% !important;
height:25.5% !important;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
#container{
height: 64.2% !important;
}
.white-overlay{
top: 56.2% !important;
}
.manualtooltip{
width: 372px !important;
top: 21% !important;
height: 31% !important;
}
div#closetip{
padding-left: 296px !important;
}
.atail{
margin-top: -7px !important;
}
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
/*top: 32%;*/
margin-right: 16px;
}
.white-overlay{
top:32%;
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
/*top: 32%;*/
margin-right: 16px;
}
.white-overlay{
top:32%;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
/*top: 58%;*/
margin-right: 16px;
}
.white-overlay{
top:58%;
}
}
@media screen and (min-width: 1140px) {
.atail{
margin-top:-8px ;
}
div .fixed{
width: 32% ;
}
.white-overlay{
top: 52% !important;
}
}
/* (1920x1080) Full HD Display */
@media screen and (min-width: 1920px) {
/* insert styles here */
div .fixed {
/*top:61%;*/
left:76%;
width:23% !important;
}
.white-overlay{
top: 55.2% !important ;
}
.manualtooltip{
top:32% !important;
width: 21% !important;
height:19% !important;
}
p#manualtip{
font-size:16px !important;
margin-right:20px !important;
margin-top:13px !important;
}
.kicker{
font-size:15px !important;
margin-bottom:15px !important;
margin-left:37px !important;
}
div#closetip{
padding-left: 331px !important;
margin-top:-38px !important;
}
.atail{
margin-right: 24px !important;
margin-top:-4px !important;
}
#container {
height: 64.2%;
}
}
@media screen and (min-width:1280px) {
div .fixed{
width:26% ;
}
.atail{
margin-top: 3px;
}
.white-overlay{
top:51.5% ;
}
}
/* (1680x1050) WSXGA+ Display */
@media screen and (min-width: 1680px) {
/* insert styles here */
}
/* (1440x900) WXGA+ Display */
@media screen and (min-width: 1440px) {
/* insert styles here */
div .fixed{
/*top:80%;*/
}
.white-overlay{
top:80%;
}
}
.hidden {
display: none;
}
div.tooltip {
color: #222;
background: #f0f1f2;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
opacity: 0.9;
position: absolute;
z-index:2;
}
/*.whats{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#808080;
padding-left:75%;
}
.tooltips {
top:-80px;
left:20px;
color: #222;
background: #f0f1f2;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
position:absolute;
z-index:2;
opacity:0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.whats:hover .tooltips{
opacity:1;
}*/
.graticule {
fill: none;
stroke: #bbb;
stroke-width: 0px;
stroke-opacity: .5;
}
.equator {
stroke: #f0f1f2;
stroke-width: 1px;
}
.kicker {
font-size:13px ;
color:black;
margin-left: 38px;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:19px;
}
.breaks {
overflow: hidden;
height: 30px;
margin: 0;
list-style: none;
}
.breaks li {
float: left;
height: 30px;
margin: 0 1px 0 0;
position: relative;
width: 16%;
}
.breaks .bar {
width: 100%;
height: 10px;
position: relative;
}
li {
line-height: 20px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.c1 {
background-color:#98c6e9;
}
.c2 {
background-color:#4ba8ee;
}
.c3 {
background-color:#2199f4;
}
.c4 {
background-color:#268cd9;
}
.c5 {
background-color:#197ac2;
}
.c6 {
background-color:#056ab5;
}
.dtext {
color:black;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-top:2px;
}
#tooltip3 {
position: absolute;
width: 185px;
height: auto;
padding: 10px;
z-index:10001;
background-color: white;
opacity:0.8;
/*border-color:#2A0000;
border: 1px solid;
*/ /* -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;*/
/* -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4) pointer-events: none;*/
}
#tooltip3.hidden3 {
visibility:hidden;
}
#tooltip3 p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding:1px;
/*text-align:left;*/
}
/*img{
widht:100px;
height:100px;
position:relative;
}*/
/*.tooltipp{
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4) pointer-events: none;
}*/
p#manualtip{
font-size:13px ;
float:right;
margin-right:20px;
margin-top:13px;
color:#056ab5;
}
p#manualtip:hover{
cursor:pointer;
}
.manualtooltip{
z-index:11;
background-color:white;
right:0;
top:18%;
margin-right:10px;
opacity:0.9;
padding:10px;
width: 271px;
height: 28%;
margin-bottom:10px;
visibility:hidden;
background-color:white;
}
div#closetip{
right: 0;
margin-right: 25px;
padding-left: 195px;
}
div#closetip:hover{
cursor:pointer;
}
.atail {
position:absolute;
display: inline-block;
border-width: 20px;
border-style: solid;
border-color: #cccccc transparent transparent transparent;
width: 0px;
height: 0px;
margin-right:33px;
right:0;
}
.atail2 {
position:relative;
display: inline-block;
border-width: 19px;
border-style: solid;
border-color: transparent;
width: 0px;
height: 0px;
margin-right:33px;
right:0;
}
div#zoombutton{
right:0;
margin-right:20px;
z-index:10;
top:4%;
}
/*button#zoom_in{
text-align:center;
}
button#zoom_out{
text-align:center;
}*/
.buttons-size{
width:3em;
height:3em;
}
p#manualparatip{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
/*input, textarea {
-webkit-appearance: none;
-webkit-border-radius: 0;
}*/
/*html[xmlns*=""]:root .buttons-size {
}*/
/*@media screen and (-webkit-min-device-pixel-ratio:0) {*/
/* Safari and Chrome, if Chrome rule needed */
/* .someClass {
color:#c00;
}*/
/* Safari 5+ ONLY */
/*.buttons-size {
-webkit-border-radius: 0;
-webkit-appearance: none;
}
}*/
.white-overlay{
background-color: white;
opacity: 0.7;
width: 100%;
top: 51.2%;
position: fixed;
z-index: 1;
height: 10%;
}
.readmore{
font-style: italic;
font-size:12px;
font-weight:100 !important;
font-family:Arial, Helvetica, sans-serif;
}
.couplename{
font-size:16px;
margin-top:5px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
.couplestate{
font-size:14px;
font-weight:100 !important;
font-family:Arial, Helvetica, sans-serif;
}
感謝。
我在我的筆記本電腦上看過，玩過窗口大小，看着我的iphone，它在手機上呈現良好，但地圖需要滾動。這是你所看到的嗎？你在追求什麼？ –
一切都很好，只需在'代碼'中調整'白色覆蓋div'以獲得特定尺寸即可。 – Hashy
目前我在CSS文件中使用帶有！重要標籤的媒體查詢，但不確定這是否是一種好的做法。此外，它只顯示確定的一些設備。我想定位平板電腦，大型桌面和手機（橫向視圖）。此外，瀏覽器中也很少有問題。請建議我怎樣才能使它在最大屏幕尺寸和連續鏡頭上完美觀看。 謝謝 –