iT邦幫忙

rwd相關文章
共有 99 則文章
鐵人賽 Modern Web DAY 5
我說那個手機版 系列 第 5

技術 [Day 5] 從內容開始看格線系統

內容為王 如果以現在的趨勢來看,應該叫「廣告為王」。 當然我不會設計,所以也就不會設計廣告。網站主要的目的,是要傳達內容,所以關於文件流、斷點、區塊設計這些...

鐵人賽 Modern Web DAY 4
我說那個手機版 系列 第 4

技術 [Day 4] 給我一個 Box

區塊 我們在開天闢地的時候,網頁就是從區塊開始。 <header> <!-- 開天 --> </header> <...

鐵人賽 Modern Web DAY 3
我說那個手機版 系列 第 3

技術 [Day 3] 我是誰,我在哪裡

回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HT...

鐵人賽 Modern Web DAY 2
我說那個手機版 系列 第 2

技術 [Day 2] 那個網頁設計

網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫...

鐵人賽 Modern Web DAY 1
我說那個手機版 系列 第 1

技術 [Day 1] 我說那個手機版

說在最前面 網頁這種萬年老埂應該是沒什麼人會看,會想要撰寫這種偏冷門的東西,純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門,真的會想手...

達標好文 技術 領進前端門,修行在個人:一變應萬變的響應式網頁設計(2) - 常見版型佈局設定

禁止顯示x軸法則 在開發響應式網頁時最切記的就是不能出現x軸,為什麼呢?當使用者瀏覽時,若畫面有x軸也有y軸時,使用者必須上下左右滑動去瀏覽,這樣對於使用者體驗...

技術 領進前端門,修行在個人:一變應萬變的響應式網頁設計(1) - 基本環境、觀念

基本環境建立 因為各個不同的手機有不同的寬度,如下圖如果要符合每個不同的解析度去做開發,會導致開發上非常困難,所以需要加入以下這段語法 <meta nam...

技術 [鼠年全馬鐵人挑戰] Week13 - 超新手學習筆記:如何開始撰寫 RWD

又過了一週啦~一樣是超忙的一週~~下班回家努力練習切版直播的作業,不過這次的版型比較複雜所以卡關了QQ真的是燒腦燒到一個極點這次的作業除了 PC 版之外,還需練...

技術 【前端自學之路】如何開始?

大家好!我是Steven,現在是一位下班時用閒暇時間自學前端技術的上班族,今天想分享一些我在學習過程中所領悟到的事,並且分享給你們,首先今天想聊聊如何開啟前端自...

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...

技術 RWD-off-canvas 側邊選單練習

這次來練習一個比較進階的練習,是 RWD + off-canvas 側邊選單練習 這次練習會使用到 jQuery 的 addClass 跟 removeClas...

技術 RWD 漢堡選單練習 toggleClass

這次的漢堡選單練習,是要讓選單在手機頁面時加上 JS,讓選單有互動的效果, 所以需要了解一點 jQuery 的運作方式,可以去找一下相關資料,或許可以也可以來這...

技術 如何用 Sass 實現類似 Bootstrap 4 的格線系統

★ 首先這篇文章適合以下背景的人閱讀: 1.大概了解什麼是格線系統,甚至有用過2.有使用過 Sass 管理及撰寫 CSS,並且對基礎 Sass 語法 (SCS...

技術 關於購物車頁面的 RWD 移動概念

鐵人賽結束了,但說過了寫文章是 to be continued 的,今天就要先來記錄一下這個購物車頁面的 RWD 移動概念。 回歸正常學習進度,檢視了一下作業與...

技術 RWD 漢堡選單練習-讓漢堡顯示在 header 上

這次來練習響應式網站很常見到的漢堡選單 但漢堡選單要寫的內容有點長,就分段來記錄一下這個過程。 這次要顯示的內容如下圖 如果在 pad 尺寸顯示會如下 要注意如...

鐵人賽 Modern Web DAY 16
用Angular打造完整後台 系列 第 16

技術 day16 List常見問題(一)

簡述 列表中經常會遇到的問題大約幾下幾種: 當後台需要RWD,但欄位太多了,縮起來實在是太難看。 使用materia提供的MatPaginatorMod...

鐵人賽 Modern Web DAY 9
淺談web 系列 第 9

技術 鐵人賽DAY9-RWD

一、何謂RWD響應式網頁設計(Responsive web design,RWD)是一種網頁設計的概念,由Ethan Marcotte於2010年時提出此,透過...

鐵人賽 自我挑戰組 DAY 9
網頁學習紀錄 系列 第 9

技術 鐵人賽Day9-體驗不好的 RWD

這禮拜因為小孩公托有腸病毒,加上工作繁忙,這兩天真是超級累,除了把握時間來看一下技術社團與看書外,已無暇寫程式,這幾天太太跟我說她上班的地方所製作的網頁很不好用...

技術 使用更親民!財政部中區國稅局網站全面採用「響應式」網頁設計

政府與公家機關的網站能提供民眾許多便民資訊,因此時常被使用,但因應現在多數人都習慣直接使用行動裝置閱覽,這時便容易出現問題:不適應手機規格的網頁常常需要民眾自行...

鐵人賽 影片教學 DAY 23

技術 金魚都能懂網頁設計入門 : RWD選單(鐵人賽第二十三天)

教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 媒體查詢設定方式 選單控制方式 CSS選取器使用方式 行動優先還是桌機...

鐵人賽 影片教學 DAY 22

技術 金魚都能懂網頁設計入門 : RWD排版試做(鐵人賽第二十二天)

教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 從手機先設定還是桌機先設定 如何設定HTML結構 如何設定CSS 圖片...

鐵人賽 影片教學 DAY 21

技術 金魚都能懂網頁設計入門 : RWD入門(鐵人賽第二十一天)

教學影片 不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道 重點回顧 各種裝置的網頁寬度要怎麼設定 製做RWD時會遇到的問題 媒體查詢的設定...

鐵人賽 自我挑戰組 DAY 17

技術 與工程師的協作之路-RWD才不是你想的那樣!

前言 在很多年前(不要問是幾年也不要問年紀!)初次聽到RWD這個詞的時候就覺得實在是很新很潮!正好主管說想蓋個部落格來衝衝SEO我就立馬毛遂自薦~說我想嘗試看看...

鐵人賽 自我挑戰組 DAY 7

技術 Day7 利用純 HTML / CSS 來一個好吃的手作漢堡

考慮 RWD 網站中,一定要來一個美味的漢堡! 第一次聽到前輩跟我說可以在手機面板時考慮把選單切成漢堡,我心裡真的只有那好吃香香的漢堡啊~就是這個啊~ 所以~...

鐵人賽 自我挑戰組 DAY 6

技術 Day6 如何做出響應式網頁(RWD)?

常常聽到響應式網頁,但是怎麼做呢? 響應式設計(Responsive web design)指的是使網頁內容在不同裝置下,都可以呈現出適切的內容。在說明如何設定...

鐵人賽 Modern Web DAY 3
AMP 系列 第 3

技術 AMP(Lession 3) - 使用AMP做RWD

使用AMP做RWD RWD 在現如今的網站,可以說是必備設定了。這兒要注意一點:平日裡我們是用 css 在做 RWD 的設定,但在 AMP 的世界裡,並不是這樣...

技術 RWD為什麼讓人愛不釋手?

響應式網頁設計(Responsive Web Design)簡稱RWD,又稱適應性網頁、回應式網頁設計。指網站能跨平台使用,因應不同的裝置,如:Iphone、P...

鐵人賽 Modern Web DAY 9
前端新手村 系列 第 9

技術 前端新手村 橫向排列 & 實現純手工 RWD

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...

鐵人賽 Modern Web DAY 5

技術 Day5 全員耍廢中(上) Mobile設計

這幾天想來分享幾個設計行動版網頁要素,想必也有許多人開發過行動版網頁,也有許多的手機APP是透過嵌入一個Webview將網頁放到其中,大多數的使用者是感受不出來...

鐵人賽 Modern Web DAY 2
前端新手村 系列 第 2

技術 前端新手村 從設計載體到RWD顯示原理

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻 前言 網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網...