移動端響應式 vue 路由 簡單筆記

原創 艾莉宝贝 2020-02-20 16:25

pc端視口

WEBRESOURCE12a1ca4d52679cd83434d7aec87ff7ebuploading.4e448015.gif正在上傳…重新上傳取消

 

移動端視口

 

問題發現 pc和瀏覽器手機 字體不會縮小

但是真機字體縮小

WEBRESOURCE7ae16f772e422d7c914b2d37905238d1uploading.4e448015.gif正在上傳…重新上傳取消

 

WEBRESOURCEc691f78dc828a8bf8e0d811604b24ac5uploading.4e448015.gif正在上傳…重新上傳取消

 

WEBRESOURCE90a632e6943556830b4553deae3e9d74uploading.4e448015.gif正在上傳…重新上傳取消

解決方法

WEBRESOURCE64f03cb98983f3372cb19c1cc1176384uploading.4e448015.gif正在上傳…重新上傳取消

 

WEBRESOURCE0c22b3c65a7cdda5788f46ad78516dcbuploading.4e448015.gif正在上傳…重新上傳取消

 

WEBRESOURCEc2683a8b204c4b207215f8d49d2a1377uploading.4e448015.gif正在上傳…重新上傳取消

 

WEBRESOURCE083f249c0c5ca63e13f8fb964afc2502uploading.4e448015.gif正在上傳…重新上傳取消

 

WEBRESOURCEd2538f11be8f21103e6ac8e81d7b8465uploading.4e448015.gif正在上傳…重新上傳取消

content 的值

 

WEBRESOURCE1bb093c34e7a8082439029642465a738uploading.4e448015.gif正在上傳…重新上傳取消

 

 

移動端

 

 

 

 

 

 

使用watch 進行監聽

WEBRESOURCEe08c164fcfbe0e7a42642653fa6448d6uploading.4e448015.gif正在上傳…重新上傳取消

 

 

 

過渡效果

 

WEBRESOURCE7ceebdb87dea17793e6882d2cd64b8b5uploading.4e448015.gif正在上傳…重新上傳取消

 

WEBRESOURCE47a9db2c5836dd501e478fa89116ffb4uploading.4e448015.gif正在上傳…重新上傳取消

路由嵌套

 

 

艾莉寶貝
發佈了73 篇原創文章 · 獲贊 27 · 訪問量 5萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

iNeuOS工業互聯網操作系統，增加電力IEC104協議

1.      概述... 2 2.      配置IEC104協議設備驅動... 2   1.   概述 　　IEC60870-5-104 是一種電力自動化系統中常用的通信協議，使用 TCP/IP 協議作爲底層通信協議，用於監視和控制電

唯笑志在-ineuos.net 2024-05-29 14:29:22

【Mac】前後端分離項目（springboot + vue）用nginx部署

步驟 npm run build 把項目打包到dist目錄下。新建vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = d

金大鑫要堅持 2024-05-29 14:27:52

圖牀PicGo

https://github.com/Molunerfinn/PicGo https://github.com/Molunerfinn/PicGo

hiningrise 2024-05-29 14:25:52

微服務實踐k8s&dapr開發部署實驗（3）訂閱發佈

自託管模式運行dapr 新建訂閱webapi項目,取名爲backend 項目增加docker支持，取消https支持 修改Program.cs var builder = WebApplication.CreateBuilder(args)

hiningrise 2024-05-29 14:25:52

編程循環（2024-5-29）

  找了下go的介紹，看了一下爲什麼處理併發好。有 小線程和通道。小線程是在線程的基礎上，go自己維護的線程，減少線程切換的開銷和更靈活分配空間。通道可以在線程之間通訊，是個先進先出的管道，大概是收到數據就觸發繼續執行，就像等待系統輸入一樣

flan_grean 2024-05-29 14:24:02

向量數據庫HNSW算法

向量數據庫構建好embedding後，需要通過相關算法進行檢索，它常用到的相似性搜索算法有HNSW，HNSW算法是NSW算法改進而來,它是屬於ANN算法中不同類別的圖類別中的一種。     節點與節點之間的連接方式可以形成3類圖：正則圖，隨

人不瘋狂枉一生 2024-05-29 14:23:51

一個 .NET 開源的地圖組件庫 - Mapsui

前言 今天大姚給大家分享一個.NET開源（MIT License）、免費、同時支持多平臺框架（MAUI、WPF、Avalonia、Uno、Blazor、WinUI、Eto、.NET Android 和 .NET iOS）地圖組件庫：Maps

追逐時光 2024-05-29 14:22:51

Windows下的mysql安裝(解壓版)

Windows 安裝並配置 MySQL 5.6_mysql 5.6 安裝-CSDN博客

htj10 2024-05-29 14:22:31

AI 畫圖真刺激，手把手教你如何用 ComfyUI 來畫出刺激的圖

目前 AI 繪畫領域的產品非常多，比如 Midjourney、Dalle3、Stability AI 等等，這些產品大體上可以分爲兩類： 模型與產品深度融合：比如 Midjourney、Dalle3 等等。 模型與產品分離：比如 SD W

米開朗基楊 2024-05-29 14:22:21

huggingface 下載與訓練模型時會報 SSLERROR 連接 錯誤，解決辦法如下

我用方案一解決 解決方案 方案1：使用代理（需要梯子） 在你的 Python 代碼的開頭加上如下代碼 import os os.environ['HTTP_PROXY'] = 'http://proxy_ip_address:port'

weiooo 2024-05-29 14:19:51

（三）SQL基礎-設置主鍵爲自增序列

一、如何設置主鍵爲自增標誌 注意：這個設置必須要在創建表之前設置好，不然會報錯無法修改。

代號六零一 2024-05-29 14:18:10

《最新出爐》系列入門篇-Python+Playwright自動化測試-49-Route類攔截修改請求-下篇

1.簡介  在日常工作和學習中，自動化測試的時候：在加載頁面時，可能頁面出現很多不是很重要或者不是我們所關注的，這個時候我們就可以選擇不加載這些內容，以提高頁面加載速度，節省資源。例如：可能頁面上圖片比較多，而我們又不關心圖片內容。那麼，在

北京-宏哥 2024-05-29 14:15:30

springboot~封裝依賴引用包jar還是pom，哪種更規範

將多個第三方包封裝成一個項目後，如果你的目的是讓其他開發人員可以直接引用這些依賴，一般來說有兩種常見的方式： 打成JAR包：將封裝好的項目編譯打包成JAR文件，其他開發人員可以將這個JAR文件添加到他們的項目中，並在項目的構建工具（比如

張佔嶺 2024-05-29 14:13:20

kbgressdb之數據結構V0.2

前言 原本計劃2024.05.01日開始編碼，直到2024.05.21日纔開始編碼，因爲在2024.05.19日才感覺體力恢復到了九成，然後就開始kbgressdbV0.2版本設計，經過一週的推演與構思，終於在2024.05.29日完成V0

尹泓 2024-05-29 14:11:40

css03 CSS Selectors

https://www.w3schools.com/css/css_selectors.asp A CSS selector selects the HTML element(s) you want to style. CSS Selec

emanlee 2024-05-29 14:11:29