用於移動端的css重置reset程式碼
本章節分享一段重置程式碼,比較適合用於移動端開發。
程式碼如下:
[CSS] 純文字檢視 複製程式碼/*===reset-star===*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td,section,a,input,span{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box; } html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} html,body{-webkit-user-select: none;user-select: none;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;} body{font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif,"microsoft yahei";} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} caption,th,td{text-align:center} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} q:before,q:after {content:''} input[type=button],button{-webkit-appearance:none;-webkit-user-select:none;} a,img,input,select,li{-webkit-tap-highlight-color: rgba(0,0,0,0);} a,img{text-decoration:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout:none;} a,input,img,select{outline: none;} input::-webkit-clear-button,input::-webkit-inner-spin-button,input::-webkit-outer-spin-button {-webkit-appearance: none; } input::-webkit-search-cancel-button {display: none;} input:focus::-webkit-input-placeholder{opacity: 0;} ::-webkit-scrollbar{display:none;} img{-webkit-touch-callou:none;} *{-webkit-tap-highlight-color: rgba(0,0,0,0);} /*===reset-end===*/ html{font-size:20px;} body{font-size:0.7rem;margin:0 auto;width:100%;min-width:320px;background:#111016;} .show{display:block !important;} .hide,.none{display:none !important;} /*media*/ @media screen and (max-width:320px){html{font-size:20px !important;}} @media screen and (min-width:320px){html{font-size:20px;}} @media screen and (min-width:340px){html{font-size:21.25px;}} @media screen and (min-width:360px){html{font-size:22.5px;}} @media screen and (min-width:380px){html{font-size:23.75px;}} @media screen and (min-width:400px){html{font-size:25px;}} @media screen and (min-width:440px){html{font-size:27.5px;}} @media screen and (min-width:480px){html{font-size:30px;}} @media screen and (min-width:520px){html{font-size:32.5px;}} @media screen and (min-width:560px){html{font-size:35px;}} @media screen and (min-width:600px){html{font-size:37.5px;}} @media screen and (min-width:640px){html{font-size:40px !important;}} html{font-size:100vw/16;}
相關文章
- 關於樣式重置 css resetCSS
- 移動端開發reset.css(可用normalize替代)CSSORM
- css Reset程式碼分享CSS
- yahoo的css重置程式碼CSS
- css預重置樣式程式碼CSS
- 一些大廠的css reset 程式碼CSS
- IDE Eval Reset 重置IDE
- 關於CSS Reset那些事(2):Normalize.css 原始碼解讀CSSORM原始碼
- 中國移動重置服務密碼方法密碼
- HTML input reset 重置按鈕HTML
- pc端跳轉到移動端的判斷程式碼
- css resetCSS
- css在移動端常遇到的檔案CSS
- 關於移動端OCR證件識別的應用
- 移動端div塊拖動效果程式碼例項
- css-resetCSS
- 可以應用於移動端的頂部導航固定效果
- 如何搭建移動端CSS樣式庫CSS
- 關於移動端rem的設定REM
- 關於移動端元件庫元件
- 關於CSS Reset那些事(3):架構CSS基礎庫CSS架構
- 基於react/vue的移動端終極適配方案(更新css-modules配置)ReactVueCSS
- jQuery reset重置表單元素預設值jQuery
- 最簡單的css resetCSS
- 直播平臺原始碼,css移動端設定底部導航欄原始碼CSS
- 區分是移動端還是pc端訪問網站的程式碼網站
- 移動端判斷觸屏位置程式碼例項
- 移動端字型大小自適應程式碼例項
- 關於CSS Reset 那些事(三)之 Normalize-zh.css 出爐CSSORM
- 表單reset無法重置hidden的解決方案
- 移動端車牌識別的應用
- 移動端基於動態路由的架構設計路由架構
- 基於weex的考拉移動端動態化方案
- HTML+CSS實現時間軸(移動端)HTMLCSS
- css3 媒介查詢 適配移動端CSSS3
- 實現基於React的移動端Swiper元件React元件
- 關於移動端IOS active失效的處理iOS
- 關於移動端網頁裡的畫素網頁