調整窗口大小后如何使我的網站停留
[英]How can I make my website stay when window is resized
問題描述
現在，當我調整網頁大小時，它弄亂了我的整個網站。 我已經查找了解決方案，但它們對我沒有用。 我讀到這可能是因為我將某些位置設置為絕對位置，我試圖將它們設置為相對位置，但這沒有用。 任何幫助表示贊賞:)
網站： http ： //al-saba.net/
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400); * {margin: 0; padding: 0;} html { background-color: black; opacity: .9; min-height:100%; width: 100%; height: 100%; background-repeat: no-repeat; z-index: 2000; } h1 { position: absolute; font-family: 'Passion One'; font-size: 200px; color: blue; letter-spacing: 1.6rem; top: calc(62% - 200px); text-align: center; text-shadow: 2px 4px 3px rgba(0,0,0,0.6); opacity: .8; width: 100%; z-index: 2001; } h2 { position: absolute; font-family: 'Open Sans', monospace; font-size: 26px; color: #6EBEDC; letter-spacing: .4rem ; top: calc(64% - 30px); text-align: center; opacity: .68 ; width: 100%; z-index: 2002; } h3 { position: absolute; font-family: 'Open Sans', monospace; font-size: 24px; color: #6EBEDC; letter-spacing: .4rem ; top: calc(38% - 30px); text-align: center; opacity: .68 ; width: 100%; z-index: 2003; } body { } footer { position: absolute; bottom: calc(22% - 100px); right: calc(16% - 125px); letter-spacing: .6rem; z-index: 2002; } .homepage-hero-module { border-right: none; border-left: none; position: relative; } .no-video .video-container video, .touch .video-container video { display: none; } .no-video .video-container .poster, .touch .video-container .poster { display: block !important; } .video-container { position: relative; height: 106%; width: 100%; overflow: hidden; background: #000; } .video-container .filter { z-index: 100; position: absolute; background: rgba(0, 0, 0, 0.4); width: 102%; } .video-container video { position: absolute; z-index: 0; bottom: 0; } .video-container video.fillWidth { width: 100%; } a {text-decoration: none;} /* This class is added on scroll */ .fixed { position: fixed; top: 0; height: 70px; z-index: 1; } /* Navigation Settings */ nav { position: absolute; bottom: 0; width: 100%; height: 70px; background: #5B5B5B; opacity: .8; font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif; } nav:hover { opacity: .9; } nav li { display: inline-block; padding: 24px 24px; } nav li a:hover { color: black; } nav li a{ color: white; text-transform: uppercase; } section { height: 100vh; } /* Screens Settings */ #screen1 { background: #1061E5; text-align: center; } #screen1 p { padding-top: 200px; text-align: center; } #screen2 { background: white; text-align: center; } #screen3 { background: black; text-align: center; } @media only screen and (max-width: 520px) { nav li { padding: 24px 4px; } nav li a { font-size: 16px; } }
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale=1"> <script src = "jquery-3.1.1.min.js"></script> <script src = "script.js"></script> <link rel = "stylesheet" href="style.css"> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro" rel="stylesheet"> <title> AL-SABA.net </title> </head> <body> <header> <h3> Design • Code • Programs </h3> <h1> AL-SABA </h1> <h2> Personal Website </h2> </header> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'> <div class = "homepage-hero-module"> <div class = "video-container"> <div class = "filter"></div> <video autoplay loop class = "fillWidth"> <source src="coding.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. <source src="Love-Coding.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. </video> </div> </div> <section id="screen1"> <p>Scroll down</p> <nav class = "bar"> <ul> <li class = "bar-home"><a href="#">Home</a></li> <li class = "bar-about"><a href="#">About</a></li> <li class = "bar-projects"><a href="#">Projects</a></li> <li class = "bar-contact"><a href="#">Contact</a></li> </ul> </nav> </section> <section id="screen2"></section> <section id="screen3"></section> <footer> </footer> </body> </html>
3 個解決方案
解決方案1
0 已采納 2017-01-20 02:11:42
看起來一切正常，但“ Al-Saba” h1除外。 您可以使用考慮視口寬度的相對值來聲明字體大小。
更改您的h1 CSS。 做這個： font-size:200px; 類似於font-size:15vw 。
“設計•代碼•程序”和“個人網站”與“ Al-Saba”重疊，因為您將它們全部放在同一個div 。 嘗試以下方法：
<header>
<div> <h3> Design • Code • Programs </h3></div>
<div> <h1> AL-SABA </h1></div>
<div> <h2> Personal Website </h2></div>
</header>
解決方案2
0 2017-01-20 02:27:16
您可以調整位置。
例如，嘗試調整方向元素的位置。 您會看到很大的不同。
h1,h2,h3 {
position:static;
}
解決方案3
0 2017-01-20 02:54:46
只需刪除此元標記
<meta name = "viewport" content = "width = device-width, initial-scale=1">
p5js：當 window 調整大小時，如何使我的隨機生成的圓形包裝草圖/畫布響應？
[英]p5js: How do I make my randomly generated circle packing sketch/canvas responsive when the window is resized?
當用戶單擊鏈接轉到另一個網站時，我該如何請求用戶留下。 但是，如果他們要訪問我的網站上的其他頁面，則沒有要求？
[英]How can I request a user to stay, when they clicked a link to go another website. But no request if they want to go another page on my website?
導航到新頁面時，如何使切換開關保持在當前位置？
[英]How can I make my toggle switches stay in their current positions when navigating to new pages?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.