iT邦幫忙

rwd相關文章
共有 99 則文章
鐵人賽 自我挑戰組 DAY 6

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

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

鐵人賽 Modern Web DAY 25

達標好文 技術 【Day 25】HTML Table Responsive (RWD) 的幾種方法分享

Visual examples of those four possibilities. by CSS-TRICKS 在製作表格時,最常遇到的狀況就是需要在各種...

鐵人賽 Modern Web DAY 23

技術 RWD 與 ASP.NET (Web Form),採用Bootstrap

上一篇文章提到:自己存取資料庫,並且搭配前端設計師做好的HTML版面 ADO.NET與資料庫 #5 -- 客制化自己的「首頁」http://ithelp.ith...

鐵人賽 自我挑戰組 DAY 7

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

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

鐵人賽 Modern Web DAY 28

達標好文 技術 【Day 28】Youtube iframe 影片自動縮放大小 - CSS 解決方法

在製作網頁時很常遇到,網站內需要嵌入 Youtube 影片,但影片無法跟隨螢幕尺寸縮放的問題。通常使用 Youtube 分享功能嵌入的 iframe 原始碼,已...

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

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

技術 [RWD] GridView搭配 FooTable (jQuery) 的表格效果 -- 自動折疊

[RWD] GridView搭配 FooTable (jQuery) 的表格效果 -- 自動折疊 http://www.dotblogs.com.tw/mis2...

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 9

技術 第 9 集:RWD 響應式

此篇會著重在 Bootstrap 5 響應式的介紹以及使用方法。 RWD 響應式網頁設計 (Responsive Web Design) 簡稱 RWD,為...

鐵人賽 Modern Web DAY 12

達標好文 技術 【Day 12】網頁設計師的靈感來源,私藏的10個網站收集頁分享!

當一個新的案子進來洽談時,我們通常會在評估階段,先按照客戶的「產業」和「需求」找一些相應或適合的視覺風格網站。 除了公司本身的作品案例外,也會蒐集一些客戶 /...

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

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

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

鐵人賽 自我挑戰組 DAY 17

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

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

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

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

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

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

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

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

鐵人賽 Modern Web DAY 22

技術 Day 22. RWD 響應式設計的利器- 理解 Figma 的 Constraints 機制

Constraints 是 Figma 中一個很重要的功能,它可以讓我們的設計在做拉伸的時候,變的更加彈性,當你需要做 RWD (Responsive Web...

技術 RWD 漢堡選單練習 toggleClass

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

鐵人賽 開發技術 DAY 10

技術 用RWD讓悟空變身

今日目標: 學習 Template auto-binding + core-media-query 元件 今天我們要整合底下三樣素材, 目標就是讓悟空可以隨著螢...

鐵人賽 影片教學 DAY 23

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

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

鐵人賽 Modern Web DAY 16

技術 [Day 16 - 小試身手] 用HTML、CSS、JS打造個人網站 (3)

在上一篇:用HTML、CSS、JS打造個人網站 (2),完成了網頁的所有內容,接下來的工作就是讓網頁能夠適應各種螢幕大小,讓使用者在每個裝置都能有最基本的使用...

技術 ASP.NET搭配RWD(Bootstrap) 快速做出動態投影片(Carousel)效果

ASP.NET搭配RWD(Bootstrap) 快速做出動態投影片(Carousel)效果 http://www.dotblogs.com.tw/mis2000...

鐵人賽 影片教學 DAY 21

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

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

鐵人賽 影片教學 DAY 22

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

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

鐵人賽 其他技術 DAY 15

技術 Day15– 前端小字典三十天【每日一字】– RWD

RWD是什麼? 圖片來源 響應式設計 (Responsive Web Design) 什麼是響應式設計, 以網路的世界來說就是, 網站會隨著設備(桌機、平板、...

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

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

鐵人賽 開發技術 DAY 25

技術 MIS2000Lab.的「HTML5 認證考試,從零開始」#25-- 自適應使用者介面 #2

上一篇文章:MIS2000Lab.的「HTML5 從零開始」#24-- 自適應使用者介面(Adaptive User Interface)#1 http://i...

鐵人賽 Modern Web DAY 23

技術 Day 23. 透過 Constraints 機制,實作出能夠拉伸的響應式卡片設計

前一篇我們實驗 Constraints 各種設定會造成的影響後,相信大家已經對於 Constraints 有所理解了。今天我們來將昨天學到的,實際應用在真實的...

技術 (假日研討會)台北,Muki老師-- RWD前端設計一日研討會(使用Boostrap)

(假日研討會)台北,Muki老師-- RWD前端設計一日研討會 Responsive Web Design一日實作 (使用Boostrap) http://ww...

鐵人賽 Modern Web DAY 5

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

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