我開始構建我的 angularjs 材料移動網站。我正在使用一個已經建立的現有桌面站點并使其回應移動。
我在標題 HTML 代碼中添加了以下標記：
<meta name="viewport" content="width=device-width, initial-scale=1">
重繪 后，我注意到現在一切似乎都被放大了，字體大小也增加了。我一直在添加樣式標簽來手動減小字體大小，但它變得非常乏味，這個網站也需要適應平板電腦。
似乎找不到任何顯示有關如何處理此問題的最佳實踐的檔案。我是否應該使用intial-scale我的meta標簽中的值并降低它，直到我找到一個適合我所有設備的最佳位置？還是我想使用 CSS 并手動降低所有組件的字體大小？
我對這方面的最佳實踐感到有些困惑。AngularJS Material 網站沒有提到視口問題。任何人都可以提供幫助或提供一些見解嗎？
uj5u.com熱心網友回復：
AngularJS Material 使用斷點，就像大多數樣式框架一樣。您可以在此處找到斷點的參考：https : //material.angularjs.org/1.1.5/layout/introduction
如果您是回應式設計的新手，那么您應該從一些基礎知識開始，例如視口實際上是什么，它是什么意思？
瀏覽器的視口是可以看到 Web 內容的視窗區域。這通常與呈現的頁面大小不同，在這種情況下，瀏覽器會為用戶提供滾動條以滾動并訪問所有內容。
來源：https : //developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
在您的元標記中，您定義了視口行為，您定義的內容幾乎是要遵循的標準。
您的字體大小發生變化的原因很可能是因為應用程式最初在沒有定義視口的情況下以一種方式設定它們的樣式，現在您的視口已經定義，您會看到不同的縮放比例。
現在，我在開頭提到的另一個非常重要的點是斷點，斷點是什么以及我們如何使用它們？為了解決您自己問題的一部分，最佳實踐是什么？
如果您熟悉經典 CSS，那么斷點可以稱為媒體查詢。
當您想要根據設備的一般型別（例如列印與螢屏）或特定特性和引數（例如螢屏解析度或瀏覽器視口寬度）修改站點或應用程式時，媒體查詢非常有用。
來源：https : //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
媒體查詢用于根據給定的設備寬度（和/或高度）定義樣式更改。在大多數情況下，您單獨使用寬度定義（這也是您在各種樣式庫檔案中看到的參考單位，例如 AngularJS Material）。
僅按寬度定義媒體查詢的例外情況是，當您希望非常具體地針對平板電腦時。這是因為更大的平板電腦尺寸會與桌面斷點相沖突，桌面斷點通常從 960 像素開始（有時您會看到 958 像素或 959.8 像素）。
現在，什么被認為是最佳實踐？
回應式設計的最佳實踐通常被稱為“移動優先”方法/設計。您首先設計要支持的最低螢屏解析度（對于非常過時的設備為 280 像素，按照今天的標準為 320 像素），然后逐步提高。
移動優先設計是成功產品設計的關鍵因素。首先為最小的螢屏設計，然后按照自己的方式進行設計，使設計師能夠專注于產品的核心功能。當您專注于產品的核心并剝離其余部分時，您就能夠確定產品中最重要的用戶體驗組件。
來源：https : //xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/
額外：https : //anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/
如果您需要更多參考資料等，您可以通過執行非常簡單的 Google 搜索查詢來非常快速地找到有關移動方法的各種文章。
我的建議是，通過使用 AngularJS Material 中定義的斷點來熟悉自己，并在您自己的自定義 CSS 中使用相同的斷點，如果您想應用更多自定義樣式，而 AngularJS Material 的本機使用則不容易實作這些樣式。
通過這種方式，您將學習基礎知識，熟悉概念，然后，在未來，您可以開始考慮將 NativeScript 與 Angular 之類的東西結合起來，這是您在移動應用程式開發環境中最理想的使用方式.
今天，我們很高興地宣布一種令人興奮的新方法，可以使用 Angular 和 NativeScript 構建 Web 和移動應用程式。
首先是一些背景知識：從 Angular 開始，你就可以使用 NativeScript 和 Angular 來構建移動應用程式。
NativeScript is an open source framework for building truly native mobile apps with JavaScript. It lets you use your existing Angular skills, and as a result you get a native UI & performance on iOS and Android.
Source: https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
Link to NativeScript, here.
Happy Learning & Coding!
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/312571.html