无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

響應(yīng)式網(wǎng)站的設(shè)計(jì)現(xiàn)在非常很受歡迎，所謂響應(yīng)式網(wǎng)站，是指同一個(gè)網(wǎng)站，同一個(gè)頁(yè)面可以支持在手機(jī)、電腦、平板、以及各種設(shè)備上都能正常訪問(wèn)的網(wǎng)站，當(dāng)用戶使用任何設(shè)備訪問(wèn)時(shí)，網(wǎng)頁(yè)會(huì)自動(dòng)根據(jù)其設(shè)備的屏幕大小進(jìn)行等比縮放，且不會(huì)影響顯示效果和用戶使用。因?yàn)楫?dāng)前的Internet不僅依靠計(jì)算機(jī)瀏覽網(wǎng)絡(luò)，而且更多的用戶喜歡使用移動(dòng)設(shè)備瀏覽網(wǎng)絡(luò)。 移動(dòng)設(shè)備的類型很多，設(shè)備的屏幕尺寸甚至更大。下面我將通過(guò)三個(gè)簡(jiǎn)單的步驟向您展示如何輕松地構(gòu)建響應(yīng)式網(wǎng)站以及如何在現(xiàn)有網(wǎng)頁(yè)上應(yīng)用響應(yīng)式設(shè)計(jì)技術(shù)。
1-布局
在構(gòu)建響應(yīng)式網(wǎng)站或使響應(yīng)式網(wǎng)站成為現(xiàn)有網(wǎng)站時(shí)，首先要考慮的是布局。當(dāng)我建立響應(yīng)式網(wǎng)站時(shí)，我總是從創(chuàng)建非響應(yīng)式布局開(kāi)始，固定為默認(rèn)大小。例如，網(wǎng)站的默認(rèn)寬度為1100px。
處理完非響應(yīng)式布局后，首先要做的是將以下行粘貼到HTML頁(yè)面的<code> </ code>標(biāo)記內(nèi)。這將在所有屏幕上以1×1的縱橫比設(shè)置視圖，并刪除iPhone和其他移動(dòng)設(shè)備的默認(rèn)功能，這些功能以全屏呈現(xiàn)網(wǎng)站，并允許用戶通過(guò)捏合來(lái)放大布局。Media Queries使您的網(wǎng)站在從智能手機(jī)到大屏幕的各種顯示器上看起來(lái)都不錯(cuò)。
比如通過(guò)查看代碼，可以看到我定義了兩種尺寸：第一種尺寸最大寬度為1060px，并且針對(duì)平板電腦橫向顯示進(jìn)行了優(yōu)化。#primary占其父容器的67％，#secondary30％，以及3％的剩余邊距。
第二個(gè)尺寸是為平板電腦肖像和較小尺寸設(shè)計(jì)的。由于智能手機(jī)的屏幕尺寸較小，我決定提供#primary100％的寬度。#secondary也具有100％的寬度，并將顯示在下方#primary。
以下是CSS代碼展示：

/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

2-Medias
響應(yīng)式布局是構(gòu)建完全響應(yīng)式網(wǎng)站的第一步?，F(xiàn)在，讓我們集中討論現(xiàn)代網(wǎng)站的一個(gè)非常重要的方面：媒體，例如視頻或圖像。
下面的CSS代碼將確保您的圖片永遠(yuǎn)不會(huì)比其父容器大。它非常簡(jiǎn)單，適用于大多數(shù)響應(yīng)式網(wǎng)站。為了正常運(yùn)行，必須將此代碼段插入CSS樣式表中。

img { max-width: 100%; height: auto; }

盡管以上技術(shù)是有效的，但是有時(shí)可能需要對(duì)圖像進(jìn)行更多控制，并根據(jù)客戶端顯示尺寸顯示不同的圖像。這是Nicolas Gallagher開(kāi)發(fā)的一種技術(shù)。

<img src="image.jpg" alt="" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" />

我們使用該data-*屬性存儲(chǔ)替換圖像的url?，F(xiàn)在，讓我們使用CSS3的全部功能，如果min-device-width條件匹配，則用指定的替換圖像之一替換默認(rèn)圖像：

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

讓我們看一下當(dāng)今網(wǎng)站中另一個(gè)非常重要的Medias：視頻。
由于大多數(shù)網(wǎng)站都使用來(lái)自第三方網(wǎng)站的視頻，因此我決定重點(diǎn)研究Nick La的彈性視頻技術(shù)。此技術(shù)使您可以使嵌入式視頻具有響應(yīng)能力。
HTML代碼：

<div class="video-container"><iframe src="http://player.vimeo.com/video/6284199?title=0&amp;byline=0&amp;portrait=0" width="800" height="450" frameborder="0"></iframe></div>

CSS樣式代碼：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

將此代碼應(yīng)用到您的網(wǎng)站后，嵌入式視頻即可響應(yīng)。
3-排版方式
大多數(shù)開(kāi)發(fā)人員仍使用像素來(lái)定義字體大小。當(dāng)網(wǎng)站具有固定寬度時(shí)，像素很好，但自適應(yīng)網(wǎng)站應(yīng)使用自適應(yīng)字體。網(wǎng)站字體大小應(yīng)與其父容器的寬度有關(guān)，以便它可以適應(yīng)客戶端的屏幕并在移動(dòng)設(shè)備上易于閱讀。
CSS3規(guī)范包括一個(gè)名為的新單元rems。它們的工作原理幾乎與em單元相同，但是相對(duì)于html元素而言，這使它們比易于使用ems。
由于rems是相對(duì)于html要素，不要忘了復(fù)位html字體大?。?br />
html { font-size:100%; }

完成后，可以定義自適應(yīng)字體大小，如下所示：

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 

以上就是響應(yīng)式網(wǎng)站建站全部技術(shù)指南。