技術提供:Blogger.

創意網頁設計,響應式網頁,部落格版型,資料庫,購物車,Bootstrap,RWD,html,css,php,jquery,MySQL,專營綠茶,紅茶,高山凍頂烏龍,阿里山杉林溪梨山大禹嶺茶及茶葉罐杯壺禮盒批發零售,兼營艋舺快遞,汽機車外送,中央果菜市場,環南市場,迪化街等地代購採買及各項代理服務! 孟甲服務專線:0952-916626
E-mail:roberchen3@gmail.com


Html語法之打勾隱藏選單效果

請打勾看範例 <!--點擊式開關選單_開始-->
<input value="on" type="checkbox" onclick="aaa.style.display=aaa.style.display=='none'?'':'none'" /> 
請打勾看範例<div id="aaa" style="DISPLAY: none">我是範例不是飯粒</div>
<!--點擊式開關選單_結束-->
~歡迎轉載,但請註明來源網站名稱和網址,文章若有侵權,請來信告知,我們會盡快處理~

"你是獵人還是獵物?"

Related Posts Plugin for WordPress, Blogger...

響應式網頁的優點

認識Viewport,Viewport的作用是告訴瀏覽器,目前的裝置是多寬及多高,以便讓訪客透過不同瀏覽裝置瀏覽網站時,不需要透過手指頭來進行放大或縮小的動作閱讀網頁。
語法為
〈meta content="width=device-width, initial-scale=1.0, minimum-scale=0.8,maximum-scale=2.0,user-scale=no" name="viewport"〉
width:使用device-width來做為可視區的寬度
initial-scale:表示初始化的比例,1表100%,範圍從0.1~1可任填。
minimum-scale=0.8:表最小可縮放到0.8比例
maximum-scale=2.0:表最大可縮放到2.0比例
user-scale:是否允許使用者縮放,no是不允許,yes是允許。
由於響應式網頁是建立在css3的基礎下,因此要體驗響應式網頁之前必須要有HTML5與CSS3的瀏覽器
目前支援的瀏覽器版本為
  • IE9以上
  • Chrome、Firefox、Opera、Safari使用自動更新版本即可
開發本與時間比往頁APP成本低
因可搭配CSS3的Media Query來撰寫支援行動裝置尺寸的css內容,已應負各種媒介的瀏覽器,若是網頁型的APP則必須各自開發IOS版本及Android板兩個版本,一個版本皆數萬十元起跳,開發時間加上審核上架時間相當長,因此開發成本和時間上明顯優於APP。
不需下載APP就能使用
APP若要更新,必須重新審核過後,再通知所有用戶下載更新;而響應式網頁,只要管理者更新網站資訊,訪客就會瀏覽到最新的資訊版本。
維護成本比APP低
響應式網頁不需要在另寫一份HTML,只需要用CSS屬性針對不同的瀏覽裝置調整即可。然而APP完成後要不定期根據手機的作業系統或新的瀏覽規格做調整,才能確定APP在各種行動載具上都能順利運作。
品牌形象一致
同一個網站適用於各種裝置,自然不需要針對不同版本來設計不同的視覺效果。
符合使用者習慣
不論是電腦PC或行動裝置,瀏覽器的搜尋功能仍以「網頁」為主,例如,當搜尋「艋舺古蹟」時,只會呈現關於「艋舺古蹟」的相關內容,並不會搜尋帶有艋舺古蹟名稱的APP內容。
利於SEO(搜尋引擎最佳化)
響應式網頁在SEO方面顯然優於APP,響應式網頁可避免重複性的內容,保持一致性的連結與使用者習慣性,所以響應式網頁在SEO方面則比APP占優勢。
~歡迎轉載,但請註明來源網站名稱和網址,文章若有侵權,請來信告知,我們會盡快處理~

"你是獵人還是獵物?"

Related Posts Plugin for WordPress, Blogger...

響應式網頁的媒體查詢 Media Queries 及嵌入內容的設定

Media Query的使用方式:
  1. 在CSS檔案中用@media來判斷使用者螢幕寬度,來選擇載入哪一種CSS樣式
  2. 在HTML文件中media屬性判斷使用者裝置寬度,來選擇載入哪一種CSS檔案
@media screen and (min-width:1024px) { css設定1 } 畫面寬度1024以上採用css設定1
@media screen and (min-width:768px) { css設定2 } 畫面寬度768以上採用css設定2
@media screen and (min-width:480px) { css設定3 } 畫面寬度480以上採用css設定3
@media screen and (min-width:600px) and  (max-width:800px)  { css設定4 } 畫面寬度600~800px之間採用css設定4
@media only screen and (min-width:600px) { css設定5 } only是用來針對那些不支援Media Queries,卻需要Media Type的設備隱藏樣式使用的。

可新增一個div標籤並加入 embed-responsive
〈div class="embed-responsive embed-responsive-16by9"〉
〈iframe src="http://hala999.com" width="560" height="315" marginwidth="0" marginheight="0" frameborder="0" allowfullscreen 〉〈/iframe〉
〈/div〉
16by9表示影片是 16:9,若是4:3則要更改為4by3
~歡迎轉載,但請註明來源網站名稱和網址,文章若有侵權,請來信告知,我們會盡快處理~

"你是獵人還是獵物?"

Related Posts Plugin for WordPress, Blogger...