移動端字型大小自適應程式碼例項
分享一段程式碼例項,它實現了移動端字型大小自適應效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body { font-size: 10px; padding: 0; margin: 0; } @media screen and (min-width:321px) and (max-width:375px) { html { font-size: 10px; } } @media screen and (min-width:376px) and (max-width:414px) { html { font-size: 10px; } } @media screen and (min-width:415px) and (max-width:639px) { html { font-size: 12px; } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 12px; } } @media screen and (min-width:720px) { html { font-size: 16px; } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px; } } @media screen and (min-width:800px)and (max-width:1199px) { html { font-size: 25px; } } @media screen and (min-width:1200px) { html { font-size: 30px; } } div.box { font-size: 2rem; height: 10rem; background: black; color: white; padding: 1rem; } </style> </head> <body> <div class="box"> 調整視窗測試效果 通過適配,然後控制rem的大小。達到字型或者盒子的自適應 </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).@media可以參閱css3 Media Queries媒體查詢一章節。
(2).rem可以參閱CSS3 rem單位一章節。
相關文章
- 移動端頁面大小自適應程式碼例項
- 圖片尺寸大小自適應程式碼例項
- 圖片大小自適應手機螢幕程式碼例項
- javascript動態設定字型的大小程式碼例項JavaScript
- iframe高度自適應程式碼例項
- <iframe>高度自適應程式碼例項
- 文字框高度自適應例項程式碼
- textarea文字框高度自適應程式碼例項
- jQuery實現設定字型大小程式碼例項jQuery
- 移動端div塊拖動效果程式碼例項
- Android FixedTextView 字型大小自適應文字框AndroidTextView
- CSS載入遠端字型例項程式碼CSS
- ajax應用實現iframe高度自適應程式碼例項
- jquery實現的iframe高度自適應程式碼例項jQuery
- 移動端判斷觸屏位置程式碼例項
- Web移動端 自適應縮放介面Web
- 前端移動端自適應方案【筆記】前端筆記
- input文字框實現寬度自適應程式碼例項
- 原生javascript實現的iframe高度自適應程式碼例項JavaScript
- jQuery實現的圖片尺寸自適應程式碼例項jQuery
- 移動端自適應個人理解與收集——remREM
- 移動端web自適應適配佈局解決方案Web
- 中間寬度自適應的三列布局程式碼例項
- 左欄尺寸固定右欄寬度自適應程式碼例項
- css水平元素寬度自適應均勻排列程式碼例項CSS
- 移動端點選彈出提示視窗程式碼例項
- 移動端自適應佈局的最好工具-remREM
- css凹凸字型和發光字型程式碼例項CSS
- HTML5頁面移動端自適應佈局的實現示例程式碼HTML
- js實現的移動端貪吃蛇遊戲程式碼例項JS遊戲
- flutter根據給定寬度自適應縮放字型大小Flutter
- HTML5 移動端自適應方案與踩坑HTML
- 方向鍵控制元素移動程式碼例項
- css實現的左右兩列自適應等高效果程式碼例項CSS
- css左側欄固定右側欄寬度自適應程式碼例項CSS
- js實現移動端字型響應式JS
- 移動端水平滑動刪除程式碼例項
- [適配性]移動Webapp自適應方案WebAPP