2017-02-15 193 views
0

我剛剛完成了我的個人網站,我非常努力地工作。在電腦上看起來很正常,但在手機上看起來完全沒有問題。爲什麼?這是我的第一個網站,我非常激動地在手機上看到它,只是看到它完全無法播放。爲什麼我的網站在手機(ReactJS)上看起來完全不同?

這裏是我的index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <title>Website</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <link rel="stylesheet" href="index.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script> 
    </head> 

    <body> 
    <div id="firstBar"></div> 

    <script type="text/babel" src="index.js"></script> 

    </body> 

</html> 

這是我的index.css文件:

html { 
    text-align: center; 
} 
.container { 
    margin-right: 10px; 
} 

.portfolio { 
    text-align: center; 
} 

.about { 
    text-align: center; 
} 

.contact { 
    text-align: center; 
} 

.fullName { 
    float: left; 
} 

.myPic { 
    margin-left: -499px; 
    height: 1051px; 
} 

.scrollTo { 
    margin: inherit; 
} 

.number { 
    font-size: 89px; 
} 

.email { 
    font-size: 70px; 
} 

.githubIcon { 
    font-size: 60px; 
} 

.masterPv:hover .pvPic { 
    opacity: 0.3; 
} 

.masterPv:hover .middlePv { 
    opacity: 1; 
} 

.masterWFAFA:hover .WFAFAPic { 
    opacity: 0.3; 
} 

.masterWFAFA:hover .middleWFAFA { 
    opacity: 1; 
} 

.masterHP:hover .HPPic { 
    opacity: 0.3; 
} 

.masterHP:hover .middleHP { 
    opacity: 1; 
} 

.scrollToAbout { 
    text-align: center; 
} 

.masterPv { 
    position: relative; 
    width: 50%; 
} 

.pvPic { 
    opacity: 1; 
    display: block; 
    width: 400px; 
    height: auto; 
    transition: .5s ease; 
    backface-visibility: hidden; 
} 

.middlePv { 
    transition: .5s ease; 
    opacity: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

.pvText { 
    background-color: #4CAF50; 
    color: white; 
    font-size: 16px; 

    margin-right: 139px; 
} 

.masterWFAFA { 
    position: relative; 
    width: 50%; 
    text-align: center; 


    /*top: -203px;*/ 


} 

.WFAFAPic { 
    opacity: 1; 
    display: block; 
    width: 400px; 
    height: auto; 
    transition: .5s ease; 
    backface-visibility: hidden; 
} 

.middleWFAFA { 
    transition: .5s ease; 
    opacity: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

.WFAFAText { 
    background-color: #4CAF50; 
    color: white; 
    font-size: 16px; 
    padding: 16px 32px; 
    margin-right: 139px; 
} 

.masterHP { 
    position: relative; 
    width: 50%; 
    margin-left: 640px; 
    bottom: 409px; 
} 

.HPPic { 
    opacity: 1; 
    display: block; 
    width: 400px; 
    height: auto; 
    transition: .5s ease; 
    backface-visibility: hidden; 
} 

.middleHP { 
    transition: .5s ease; 
    opacity: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

.HPText { 
    background-color: #4CAF50; 
    color: white; 
    font-size: 16px; 
    padding: 16px 32px; 
    margin-right: 139px; 
} 

.mainPic { 
    border-width: 2px; 
    width: 1100px; 
    text-align: center; 
    overflow:hidden; 
} 

code { 
    text-align: center; 
} 

.wrapper { 
    background-color: rgb(134,321,342); 
} 

div { 
    text-align: center; 
    margin-right: 31px; 
} 

這是我index.js文件:

var Website = React.createClass({ 

    scrolling: function() { 
    $('html,body').animate({ 
     scrollTop: $(".scrollToPortfolio").offset().top 
     },'slow'); 
    }, 

    scrollToAbout: function() { 
    $('html,body').animate({ 
     scrollTop: $(".scrollToAbout").offset().top 
    },'slow'); 
    }, 

    scrollToContact: function() { 
    $('html,body').animate({ 
     scrollTop: $(".scrollToContact").offset().top 
    },'slow') 
    }, 

    render: function() { 

    return(

     <div className="container"> 
     <kbd className="fullName">my name</kbd> 
     <button onClick={this.scrolling} type="button" className="btn btn-primary portfolio">Portfolio</button> 
     <button onClick={this.scrollToAbout} type="button" className="btn btn-primary about">About</button> 
     <button onClick={this.scrollToContact}type="button" className="btn btn-primary contact">Contact</button> 

     <div className="mainPic"> 
      <img src={"./pictures/skyline.jpg"}></img> 
     </div> 

     <div className="scrollToPortfolio"> 
      <h2><u>Portfolio</u></h2> 
      <div className="masterPv"> 
      <a href="http://piccolovillaggio.com/"> 
      <img src={"./pictures/portfolioPic1.png"} className="pvPic img-rounded"></img> 
      </a> 
      <div className="middlePv"> 
       <div className="pvText">Menu for catering company.</div> 
      </div> 
      </div> 

      <div className="masterWFAFA"> 
      <img src={"./pictures/WFAFA.png"} className="WFAFAPic img-rounded"></img> 
       <div className="middleWFAFA"> 
       <div className="WFAFAText">Worlds first automated financial advisor.</div> 
       </div> 
      </div> 

      <div className="masterHP"> 
      <a href="http://www.ashikul.com/hunts-point/"> 
      <img src={"./pictures/HP.png"} className="HPPic img-rounded"></img> 
      </a> 
       <div className="middleHP"> 
       <div className="HPText">Hunts Point Seaport and Shipyard LLC company website.</div> 
       </div> 
      </div> 

      </div> 

     <div className="scrollToAbout jumbotron"> 
      <h2><u>About</u></h2> 
      <h2>Text Text Text Text</h2> 
     </div> 


     <div className="scrollToContact jumbotron"> 
      <h2><u>Contact</u></h2> 
      <h1 className="number">3333333333</h1> 
      <strong className="email"><a href="mailto:[email protected]">[email protected]</a></strong> 
      <p> 
      <a href="#" className="btn btn-social-icon btn-lg btn-github githubIcon "> 
      <span className="fa fa-github"></span> 
      </a> 
      </p> 
     </div> 

     <div className="wrapper"></div> 
      <span>© 2017-2018 <b>my name</b></span> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<Website/>, document.getElementById('firstBar')); 
+2

對於初學者,您的網站沒有響應。檢查更多關於它[這裏](http://stackoverflow.com/questions/32742532/how-to-build-a-responsive-website-with-reactjs)。 – vasa

+0

@vasa啊,我明白了。我覺得這是因爲我已經實現了各種像素,導致它在手機上看起來很瘋狂。 – yabva89

回答

1

答案很簡單:這是因爲你的網站是不是響應

首先我會認爲這是你的第一個完整的項目,你是新的網頁設計的。您的問題總結如下:您的網站不響應。爲了做到這一點,有各種各樣的手段,簡單的谷歌搜索響應式網頁設計會有所幫助。

爲了幫助您的搜索,您可以搜索插件,如bootstrap爲您的響應式設計或在css media queries上閱讀。

如果我們要回答你的問題,它會創建另一個網站,你是不是因此是。

確保您在responsive-design閱讀。

希望這有助於

+0

謝謝你的建議,非常感謝。 – yabva89

2

「Discombobulated」不是一個非常具體的事情來診斷。但總的來說,我認爲你的網站看起來很不習慣(在桌面和移動設備上),因爲你已經以一種......令人困惑的方式來構建它。您正在使用Bootstrap處理某些事情,但不使用其他處理器,導致樣式發生衝突並導致事物偏離對齊方式。例如,您正在使用.container,但其中沒有網格。然後你重寫臨界Bootstrap風格,比如margin,它會拋出所有東西。

引導是建立在一個良好的框架,但如果你要使用它,正確地使用它。瞭解網格如何工作,並從中建立。不要試圖手動編寫這麼多東西或重寫樣式。

+0

明白了。謝謝你的建議。 – yabva89

0

安裝引導程序不會自動使您的網頁響應。

Bootstrap網格系統提供響應式設計。 以下是自舉網格系統的基本示例。

<div className="container-fluid"> 
    <div className="row"> 
     <div className="col col-xs-12 col-md-6 col-md-offset-3"></div> 
    </div> 
</div> 

col類屬性將爲您的佈局添加響應式樣式。

最近,我用的反應,引導的反應項目和非常滿意的產品,以反應的自舉更容易爲開發商更動態地引導你的前端。這裏是

import { Grid, Row, Col } from 'react-bootstrap'; 

<Grid fluid={true}> 
    <Row> 
     <Col xs={12} md={6} mdOffset={3}></Col> 
    </Row> 
</Grid> 
相關問題