css3media響應式佈局

来源:http://www.cnblogs.com/ayu999/archive/2016/07/07/5649910.html
-Advertisement-
Play Games

響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設備的普及,用"大勢所趨"來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。隨著技術的發展css3的特性也被廣泛應用開來,它的很多新標簽也非常好用而且非常容易學習, ...


響應式佈局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設備的普及,用"大勢所趨"來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。隨著技術的發展css3的特性也被廣泛應用開來,它的很多新標簽也非常好用而且非常容易學習,就像css3的響應式佈局也是非常6的,原本只能在pc端顯示的網頁現在可以通過@media的加入就可以把一個網頁變成響應式了,pc端也可以移動端也可以真是伸縮自如啊,例如呢

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小於200px*/
        @media only screen and (max-width:200px ) {
            #p{
                background: red;
            }
        }
/*    大於300px*/
        @media only screen and (min-width:300px ) {
            #p{
                background: yellow;
            }
        }
        
    </style>
    <body>
        <p id="p">小於200px背景變紅色大於300px背景為黃色</p>
    </body>
</html>

這段代碼的效果

@media可以用於單條件也可以用於雙條件例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小於200px*/
        @media (min-width:200px ) and (max-width:500px ) {
            #p{
                background: red;
            }
        }
    </style>
    <body>
        <p id="p">200px以上並且500px以下背景變成紅色</p>
    </body>
</html>

這段代碼小於200px或者大於500px不顯示效果

簡單的一個@media就實現了響應式頁面,是不是非常easy,

自己隨便做的一個頁面這是在450px以上的頁面效果

這是450px以下的頁面效果總體做法就是將每一塊div響應式縮到450px以下的時候每個div的寬度為100%

高度為auto,我在寫這個網頁的時候遇到一個小小的問題,做到頁面底部的時候底部導航飛了,它沒有安安分分的落在底部而是在中間,我在這裡分享一下小小的知識點那就是我最後的解決方法,只需要給底部的div一個style樣式  clear:both這樣底部就會安安分分的固定到下麵了,在media里還會有橫屏和豎屏的響應式,豎屏為@media(orientation:portrait)

豎屏為@media(orientation:landscape)這樣就可以適配橫屏和豎屏了,media的優勢非常多例如我們在創建自己的簡歷的時候可以利用響應式佈局這樣我們的機會豈不是大了很多,HR也有可能會在手機上看到你的簡歷這個時候機會可能就悄悄的來到你的身邊呢

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • IONIC 是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程式,它提供了很多 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定,使用它成為 Web 和移動開發者的共同選擇。Ioni... ...
  • 今天在微信朋友圈裡看到了這樣一條信息: 100只狗排成一行,分別以1、2、3……編號,從這些狗中選出偶數號的殺掉,剩下的狗重新從1開始編號,然後再選偶數殺掉……如此迴圈直到只剩下1只狗為止。 請問這隻狗要站在哪個位置才能保證存活時間最長(除了1號)? 起初,覺得這個很簡單,在本子上隨便傻瓜式的排列下 ...
  • 預設坐標系與當前坐標系 canvas中的坐標是從左上角開始的,x軸沿著水平方向(按像素)向右延伸,y軸沿垂直方向向下延伸。左上角坐標為x=0,y=0的點稱作原點。在預設坐標系中,每一個點的坐標都是直接映射到一個CSS像素上。 但是如果圖像的每次繪製都參考一個固定點將缺少靈活性,於是在canvas中引 ...
  • 本章內容: 簡介 變數 運算符 算術運算符 比較運算符 邏輯運算符 數據類型 語句 簡介 定義 javascript是一門動態的、弱類型的解釋型編程語言,增強頁面動態效果,實現頁面與用戶之間的實時、動態交互。 javascript由三部分組成:ECMAScript、DOM和BOM ECMAScrip ...
  • 開發工具採用WebStorm,沒破解,使用了過期策略:安裝之後不著急打開程式,先設置系統日期為未來的某個日期,比如2020年。然後再打開程式,試用。然後再改回來系統日期。雖然每次打開WebStorm都會提示: 不過不影響使用,點擊“OK”繼續吧。 項目採用anguarjs seed項目作為基礎框架, ...
  • 原文地址:http://www.3lian.com/edu/2015/01-31/191131.html 原文地址:http://www.3lian.com/edu/2015/01-31/191131.html 詳解CSS的相對定位和絕對定位 感謝 3lian8 的投遞 時間:2015-01-31 ...
  • 當用百分比作為寬高時 因為百分比是相對於其最近的父元素的寬高,所以首先其父元素要有寬高,寬度一般不設置會有預設值(比如整個屏幕的寬度),但是高度不設置就沒有預設值,因此如果父元素沒設高度值,而其內部元素用了百分比作為高度時,是沒有效果的 ...
  • 今年項目的需要,開始琢磨研究前端開發,由於之前項目已經用Angularjs了,就順其而然的繼續沿用。 在使用Angularjs之前,先要準備好工具:Nodejs、npm、git、bower、fis 下麵是各個工具的安裝方法(開發機為64位的Win10): 1.Nodejs1>下載安裝:https:/ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...