首頁 web前端 html教學 [学习笔记]viewport定义,弹性布局,响应式布局_html/css_WEB-ITnose

[学习笔记]viewport定义,弹性布局,响应式布局_html/css_WEB-ITnose

Jun 24, 2016 am 11:22 AM

一,移动端宽度设置
viewport视图窗口,,视窗宽度=设备宽度,默认缩放=1,不允许用户缩放。

二,flexbox,弹性盒子模型:
1,在元素的css中添加display:-webkit-flex就可以转换成弹性盒模型了,然后在多个子元素的CSS中添加flex:1/2/3,就可以让子元素按定义的比例1/2/3分配填满父元素。
2,混合划分:

1224.png

子元素可以是固定宽度,也可以是定义flex值,灵活运用,常见于

1225.png

图片采用固定宽度防止缩放失真,然后右边的文字采用弹性布局设置flex:1。
3,不定宽高的水平、垂直居中

CSS3方案:

.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
登入後複製

更好的flexbox方案:设置父元素,让子元素水平居中

.parent{
display:-webkit-flex;
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
}
登入後複製

更多应用:

1226.png

三,响应式布局:在不同设备不同分辨率下都有良好的用户体验

1227.png

响应式布局方法是依靠媒体查询实现的:

1228.png

媒体查询类型:screen(屏幕)、print(打印机)、handheld(手持设备)、all(通用)
常用媒体查询参数:width,height,device-width,device-height,orientation(检查设备处于横向lanscape还是竖屏portrait)


em:根据父元素的font-size为相对单位;
rem:根据html的font-size为相对单位。

1229.png


1230.png

以上就是[学习笔记]viewport定义,弹性布局,响应式布局_html/css_WEB-ITnose的内容,更多相关内容请关注PHP中文网(www.php.cn)!


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1654
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1225
24
html怎麼讓一個div居中 html怎麼讓一個div居中 Apr 05, 2024 am 09:00 AM

有兩種方法可以在 HTML 中讓一個 div 居中:使用文字對齊屬性(text-align: center):適用於較簡單的佈局。使用彈性佈局(Flexbox):提供更靈活的佈局控制,步驟包括:在父元素中啟用 Flexbox(display: flex)。將 div 設定為 Flex 項目(flex: 1)。使用 align-items 和 justify-content 屬性進行垂直和水平居中。

響應式佈局設計的單位選擇指南 響應式佈局設計的單位選擇指南 Jan 27, 2024 am 08:26 AM

隨著行動裝置的普及和技術的發展,響應式佈局成為了設計師必備的技能之一。響應式佈局旨在為不同尺寸的螢幕提供最佳的使用者體驗,讓網頁在不同裝置上都能自動調整佈局,確保內容的可讀性和可用性。選擇合適的單位是響應式佈局設計的關鍵步驟之一。本文將介紹一些常用的單位,並提供選擇單位的建議。像素(px):像素是螢幕上的最小單位,它是一種絕對單位,不會隨著螢幕尺寸的改變而自動

CSS 彈性佈局屬性指南:position sticky 和 ​​flexbox CSS 彈性佈局屬性指南:position sticky 和 ​​flexbox Oct 27, 2023 am 10:06 AM

CSS彈性佈局屬性指南:positionsticky和flexbox在現代網頁設計中,彈性佈局已成為一種非常流行且有用的技術。它可以幫助我們創建自適應的網頁佈局,使得網頁在不同裝置和螢幕尺寸上都能夠很好地顯示和響應。本文將重點放在兩個彈性佈局屬性:position:sticky和flexbox。我們將詳細討論它們的用法,並透過具體的程式碼範例來

探究最佳響應式版面框架:競爭激烈! 探究最佳響應式版面框架:競爭激烈! Feb 19, 2024 pm 05:19 PM

響應式佈局框架大比拼:誰是最佳選擇?隨著行動裝置的普及和多樣化,網頁的響應式佈局變得越來越重要。為了滿足使用者不同的設備和螢幕尺寸,在設計和開發網頁時採用響應式佈局框架是必不可少的。然而,面對眾多的框架選擇,我們不禁要問:哪個才是最佳選擇?以下將對目前較流行的三種響應式佈局框架進行比較評價,它們分別是Bootstrap、Foundation和Tailwind

display在css中是什麼意思 display在css中是什麼意思 Apr 28, 2024 pm 04:00 PM

CSS中的display屬性控制元素在網頁中的版面。其意義:inline:元素內聯排列,與文本流動。 block:元素塊級排列,獨佔一行,佔據寬度。 inline-block:結合inline和block特性,內嵌排列但可設定尺寸。 none:隱藏元素。 flex:使用彈性佈局,自動調整元素大小和位置。 grid:使用網格佈局,精確控制元素位置和大小。

HTML的響應式佈局設計指南之實作方法 HTML的響應式佈局設計指南之實作方法 Jan 27, 2024 am 08:26 AM

如何利用HTML實現響應式佈局設計隨著行動裝置的普及和互聯網的快速發展,響應式佈局成為了設計師必備的技能。響應式佈局可讓網站在不同的裝置上自動適應不同的螢幕尺寸和分辨率,使用戶可以獲得更好的瀏覽體驗。本文將介紹如何利用HTML實現響應式佈局設計,並提供具體的程式碼範例。使用@media查詢@media查詢是CSS3中的一個功能,它可以根據不同的媒體條件來應用

在響應式佈局中使用HTML固定定位的實用技巧 在響應式佈局中使用HTML固定定位的實用技巧 Jan 20, 2024 am 09:55 AM

HTML固定定位在響應式佈局中的應用技巧,需要具體程式碼範例隨著行動裝置的普及和使用者對響應式佈局的需求增加,開發人員在網頁設計中遇到了更多的挑戰。其中一個關鍵問題是如何實現固定定位,以確保在不同螢幕尺寸下,元素能夠固定在頁面的特定位置。本文將介紹HTML固定定位在響應式佈局中的應用技巧,並提供具體程式碼範例。 HTML中的固定定位是透過CSS的position屬

css怎麼美化頁面 css怎麼美化頁面 Apr 25, 2024 pm 06:36 PM

CSS(層疊樣式表)透過更改文字、背景、版面等視覺元素來美化網頁。美化技術包括:1. 控製文字;2. 新增背景;3. 自訂佈局;4. 使用陰影和邊框;5. 動畫元素。使用 CSS的美化優點包括增強美觀、提升使用者體驗、優化搜尋引擎、跨平台相容性和易於維護。

See all articles