頁面設計筆記

JasonZhang 發布于2019-08-01 16:16 / 2107人閱讀

摘要：和一部分安卓設備的屏幕尺寸為英寸厘米，物理像素為大約是。對開發者來說，手機在豎直狀態下的寬度就是，開發者就可以根據這個尺寸來設計網頁，但是還要考慮手機在水平狀態時的頁面效果，以及和安卓平板上的頁面效果。

最近兩周寫了幾個頁面，雖然看起來很簡單，但是也考慮到了IE8的兼容性、不同屏幕尺寸的適配性以及其它的一些方面，所以也算是小有收獲。下面就把寫代碼過程中遇到的各種問題和解決方案記錄下來。

head區域的要點 瀏覽器渲染模式X-UA-Compatible

這一句是指IE系列瀏覽器以其最高版本運行，而不是兼容模式；同時讓安裝了Chrome Frame的瀏覽器開啟Chrome Frame的渲染模式。
IE=edge這一句對低于11的IE都有效，IE11則默認開啟此選項。如果寫成IE=9; IE=8; IE=7這種形式，則各版本IE均以自身版本的模式運行，而不是向下兼容。就實際應用而言，建議還是采用IE=edge這種形式。

參考鏈接：
Is it still valid to use IE=edge,chrome=1?
“X-UA-Compatible” content=“IE=9; IE=8; IE=7; IE=EDGE”

視口viewport

移動端瀏覽器為了保證PC端頁面能夠正常顯示，在一個虛擬的“窗口”（viewport）中渲染頁面，viewport通常是比頁面要寬的，這樣才能保證整個頁面都顯示在移動端瀏覽器中。在移動端瀏覽器里面，用戶縮放查看頁面時，頁面整體布局是不變的。

一般來說，為了保證頁面能在移動端瀏覽器里面正常顯示，都會加上下面這么一行。

上面這一行中，width屬性設置視口的寬度等于設備的寬度，按CSS像素來說的話，就是100%的比例。這樣設置了之后，頁面在寬度這個方向上的所有內容就完整展示在瀏覽器中了。initial-scale屬性設置頁面初次加載完成后的縮放級別為1，這個就沒什么可說的了。至于是否要加上禁止用戶縮放的user-scalable=0，就見仁見智了。

iPhone和一部分安卓設備的屏幕尺寸為3~4英寸（7~10厘米），物理像素為320~480（大約是160dpi）。對web開發者來說，手機在豎直狀態下的寬度就是320px，開發者就可以根據這個尺寸來設計網頁，但是還要考慮手機在水平狀態時的頁面效果，以及iPad和安卓平板上的頁面效果。

在160dpi下設計的頁面，在240dpi的屏幕中，設置了initial-scale=1屬性之后，頁面會縮放至原始大小的150%。文本自然會更加清晰、銳利，但是位圖就可能會變模糊了，那么為了保證在這兩種dpi下都有很好的顯示效果，就需要按照最終尺寸的150%（或者200%，如果還要考慮retina屏320dpi的蘋果設備的話）來設計頁面了，并通過CSS或者視口來根據設備實際情況對頁面進行合理縮放。

參考鏈接：
Using the viewport meta tag to control layout on mobile browsers
移動前端開發之viewport的深入理解

Normalize.css

為什么要用normalize.css而不是css reset？官網上總結了以下幾點：

保留有用的瀏覽器默認樣式；

將一大批HTML元素的樣式進行規范化；

修正瀏覽器的bug并保證各瀏覽器的一致性；

通過細微的改進，來提升可用性；

在代碼中用注釋和詳盡的文檔加以解釋，讓開發者知其所以然。

除此之外，normalize.css還支持IE8及更高的版本，和自己的開發需求也是相符的。

IE兼容性相關

To be continued...

GPU云服務器云服務器設計模式學習筆記高級程序設計-筆記 head-first設計模式筆記頁面設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50402.html

頁面設計筆記

摘要：和一部分安卓設備的屏幕尺寸為英寸厘米，物理像素為大約是。對開發者來說，手機在豎直狀態下的寬度就是，開發者就可以根據這個尺寸來設計網頁，但是還要考慮手機在水平狀態時的頁面效果，以及和安卓平板上的頁面效果。最近兩周寫了幾個頁面，雖然看起來很簡單，但是也考慮到了IE8的兼容性、不同屏幕尺寸的適配性以及其它的一些方面，所以也算是小有收獲。下面就把寫代碼過程中遇到的各種問題和解決方案記錄下來。...

wh469012917 2019-08-30 15:52 評論0 收藏0
CSS學習筆記(十四) 我們前端是怎么跟設計師溝通的

摘要：前端期望中的設計能給予的除了之外，還有設計上游崗位傳遞下來的東西。份文件一份好的文件是分層清晰，設計規范的文件。有些頁面設計師沒有考慮到。地址如下原文鏈接我們前端是怎么跟設計師溝通的豪情博客園 1.交付一般設計師給前端的只有psd，沒有其它多余的東西，連基本的文檔都懶得給。前端期望中的設計能給予的除了psd之外，還有設計上游崗位傳遞下來的東西。比如：產品原型，需求文檔，交...

NusterCache 2019-08-28 18:06 評論0 收藏0
JavaScript高級程序設計學習筆記二（在HTML中使用JavaScript）

摘要：在中使用在中使用腳本有兩種方式一種是嵌入在中的腳本，另一種是引入外部的腳本。二者并行執行，不會造成阻塞。字符編碼，較少使用。放置的位置將腳本放在標簽前是最佳的。小結把插入到頁面中要使用元素。延遲腳本總是按照指定它們的順序執行。在 HTML 中使用 JavaScript 在html中使用JavaScript腳本有兩種方式一種是嵌入在HTML中的腳本，另一種是引入外部的腳本。兩種方式都離...

Jason_Geng 2019-08-22 11:18 評論0 收藏0
《javascript高級程序設計》筆記：script元素屬性

摘要：高級程序設計摘錄可選。表示通過屬性指定的代碼的字符集。這個屬性并不是必需的，如果沒有指定這個屬性，則其默認值仍為。規范要求腳本按照它們出現的先后順序執行，因此第一個延遲腳本會先于第二個延遲腳本執行，而這兩個腳本會先于事件執行。《javascript高級程序設計》摘錄： async:可選。表示應該立即下載腳本，但不應妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。只對外部...

since1986 2019-08-20 18:34 評論0 收藏0
002-讀書筆記-JavaScript高級程序設計在HTML中使用JavaScript

摘要：文件內部使用使用到的代碼引入外部文件外部代碼的地址標簽的位置一般情況下，標簽的位置放在標簽中引入代碼頁面結構對于需要引入很多的中間，如果把放在頭部，無疑會導致瀏覽器呈現頁面出現延遲，就是導致頁面出現空白。頁面結構引入代碼這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第二章。 1.使用方式在HTML中使用 JavaScript 的方式有兩種，第一種就是直接內...

banana_pi 2019-08-22 11:13 評論0 收藏0