前端布局學習

阿新 • • 發佈：2018-11-20

屏幕適配媒體查詢 demo 20px bubuko alc gin dde pre

杭州出差中，項目要做大屏展示，據說到時候是4塊1920*1080的顯示屏進行展示，這幾天一直苦想到底如何進行屏幕適配呢，探索了一兩天，決定用媒體查詢結合比例計算來進行頁面設計，以便於全屏、屏幕放大縮小的正常展示，學著寫了個demo：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>全屏測試</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                overflow-x: hidden;
            }
            
            html {
                height: 100%;
                width: 100%;
            }
            
            body {
                width: 100%;
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                background-color: greenyellow;
            }
            
            .header {
                width: calc(100% - 4px);
                height: 100px;
                background-color: black;
                border: 2px solid greenyellow;
            }
            /*媒體查詢操作*/
            
            @media screen and (min-width: 640px) and (max-width: 1920px) {
                .left {
                    width: calc(25% - 14px);
                    height: calc(100% - 14px);
                    border: 2px solid greenyellow;
                    margin: 5px;
                    float: left;
                }
                .center {
                    width: calc(50% - 14px);
                    height: calc(100% - 14px);
                    border: 2px solid greenyellow;
                    margin: 5px;
                    float: left;
                }
                .right {
                    width: calc(25% - 14px);
                    height: calc(100% - 14px);
                    border: 2px solid greenyellow;
                    margin: 5px;
                    float: left;
                }
            }
            
            @media screen and (min-width: 200px) and (max-width: 640px) {
                .left {
                    width: calc(100% - 14px);
                    height: calc(100% - 14px);
                    border: 2px solid greenyellow;
                    margin: 5px;
                }
                .center {
                    width: calc(100% - 14px);
                    height: calc(100% - 14px);
                    border: 2px solid greenyellow;
                    margin: 5px;
                }
                .right {
                    width: calc(100% - 14px);
                    height: calc(100% - 14px);
                    border: 2px solid greenyellow;
                    margin: 5px;
                }
            }
            
            .main {
                width: 100%;
                height: calc(100% - 106px);
                background-color: #000000;
            }
            
            .sub-left {
                width: calc(100% - 14px);
                height: calc(50% - 14px);
                border: 2px solid greenyellow;
                margin: 5px;
                float: left;
            }
            
            .sub-right {
                width: calc(100% - 14px);
                height: calc(50% - 14px);
                border: 2px solid greenyellow;
                margin: 5px;
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="header">

        </div>
        <div class="main">
            <div class="left">
                <div class="sub-left">

                </div>
                <div class="sub-left">

                </div>
            </div>
            <div class="center">

            </div>
            <div class="right">
                <div class="sub-right">

                </div>
                <div class="sub-right">

                </div>
            </div>
        </div>
    </body>

</html>

展示效果
技術分享圖片

前端布局學習

屏幕適配媒體查詢 demo 20px bubuko alc gin dde pre 杭州出差中，項目要做大屏展示，據說到時候是4塊1920*1080的顯示屏進行展示，這幾天一直苦想到底如何進行屏幕適配呢，探索了一兩天，決定用媒體查詢結合比例計算來進行頁面設計，以便於全屏

布局學習筆記

size sel asi 顯式響應 -i sum z-index web頁面布局即將元素以正確的大小擺放在正確的位置其中重要的屬性有：Display:設置元素的顯示方式，它有以下幾個值（不完全） block:默認寬度是父元素的寬度可以設置寬高換行顯示

bootstrap柵格布局學習歷程

分辨率什麽不同的響應式樣式自己代碼 .... 工作量了解一個東西。他叫什麽?他由什麽組成，能做什麽？　　現在響應式的網站（在不同分辨率下有不同的布局）很瘦歡迎。優點：1.解決設備之間的差異化展示缺點：a.兼容性代碼多，工作量大，加載速度受到影響;b.用戶的判

前端布局模型

完全過程子元素 center over number 左右耳朵移動一、CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。在網頁中，元素有三種布局模型：1、流動模型（Flow）流動模型是默認的網頁布局模式。在流動

flex彈性布局學習

pan src 縮小 set ges 多余含義目前 self 一、介紹　　flex（ flexible box：彈性布局盒模型）,是2009年w3c提出的一種可以簡潔、快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支持：二

前端布局心得小結

樣式很多思路很快需要就會 view nbsp 以及從事前端一年多了，更多的在弄一些布局，寫一些交互，學一些後臺，時至今日，我已經慢慢有了很多經驗了，接下來主要分享一下自己的布局心得。布局這個事，其實很簡單，就是簡單的布局以及寫一些交互，當然交互的種類很多

小程序前端布局

小程序前端布局小程序前端小程序前端現在很多人都在問我們為什麽要開發小程序？？？？？小程序有什麽用？？？？？如何快速開發小程序？？？？？. . . . . . 小程序有以下優勢1、小程序不需要下載和安裝——省時省力省空間方便王能——隨時隨地只需要打開就能用，用完了就離開，。

CSS快速入門-前端布局1(抽屜）

-s 代碼知識其他 foo nbsp fix left 官方一、效果圖前面對CSS基礎知識有了一定的了解，是時候開始實戰了！以下我對抽屜（https://dig.chouti.com/）主頁進行模擬布局。官方網站效果圖：模擬網站圖：

flex布局學習筆記

之前詳細介紹 .html 優先基線 rev example wid 完整　　前端筆試面試經常會問到：不定寬高如何水平垂直居中。最簡單的實現方法就是flex布局，父元素加上如下代碼即可： display: flex; justify-content: center; a

響應式布局學習筆記【1】----基礎知識

網頁設計 water com 文章 tar 屏幕分辨率優點 light gin 本篇文章主要解決：什麽是響應式布局？有什麽優點和缺點？一什麽是響應式布局？伊桑·馬科特（Ethan Marcotte）在2010年首先提出了響應式網頁設計（RWD,Responsive

常用前端布局，CSS技巧介紹

設置高度查看 checkbox 變量地址 space -h follow radi 常用前端布局，CSS技巧介紹對前端常用布局的整理總結，並對其性能優劣，兼容等情況進行介紹 css常用技巧之可變大小正方形的繪制 1：若通過設置width為百分比的方式，則高度不能通過

CSS布局學習（三） - position屬性定義及解釋(官網直譯)

mage http docs stand 屏幕保留 gin 技術地址 static ①元素的位置是在文檔正常布局流中的位置。 ②設置top right bottom left與z-index無效。 ③在未指定position時，static是默認值以下例子進行

CSS布局學習（三） - Normal Flow 正常布局流(官網直譯)

add mar pla png 分享圖片解釋現象垂直邊距默認情況下，元素是如何布局？首先，取得元素的內容，加上內邊距（padding），邊框（border），外邊距（margin）放在一個盒子中 - 這就是我們之前看到的盒子模型默認情況下，塊級元素的內容寬

python學習_day52_前端基礎之CSS布局3

兩個表示 sans ucid grand -i 參照物原始的 doctype 一、定位屬性position 1、相對定位relative 　　相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著

從零開始學習前端開發 — 5、CSS布局模型

class width 數值 clas avi 樣式固定 eight 層疊一、css布局模型 1.流動模型（Flow）元素在不設置css樣式時的布局模型，是塊元素就獨占一行，是內聯元素就在一行逐個進行顯示 2.浮動模型（Float）使用float屬性來進行網頁布局，

0042-簡單的布局-前端學習筆記

oct idt red com 學習筆記圖片 20px add itl <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

百度前端學習日記07——布局（三）Flexbox

enter end develop docs -i ali -s 阻止 div 前言更多參考MDN flex布局正文 1.Flexbox模型主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為

web前端學習（二）html學習筆記部分（9）-- 響應式布局

edi 現在 html 打開解決活性 height 移動 tao 1.2.23 響應式布局基礎 1.2.23.1 響應式布局介紹　　1.響應式布局是2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多終端 -- 而不是為每個終端做一個特定的版本。這個概

前端學習筆記--CSS布局--定位

筆記 span tle -h ref utf-8 png inf range 1.概述 2.文檔流定位：從上到下，從左到右代碼： <!DOCTYPE html> <html lang="en"&g

前端學習筆記--布局和旋轉案例

20px 9.png otto asi 筆記 sid 文件 float head 要實現的案例： 1.分析布局 2.劃分文件結構： 3.編寫css代碼 * { padding: 0; margin: 0;

前端布局學習

相關推薦