手機web——自適應網頁設計（html/css控制）內核： -ms- /* IE 9 */ -moz- /* Firefox */ -webkit- /* Safari and Chrome */ -o- /* Opera */一. 網頁寬度自動適應手機屏幕的寬度，在head標簽內加上以下內容：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />width=device-width ：表示寬度是設備屏幕的寬度 initial-scale=1.0：表示初始的縮放比例 minimum-scale=1.0：表示最小的縮放比例 maximum-scale=1.0：表示最大的縮放比例 user-scalable=yes：表示用戶是否可以調整縮放比例二. 不使用絕對寬度1）不能指定像素寬度：width:xxx px;2）只能指定百分比寬度：width: xx%; 或者：width:auto;3）例：寬度 width:74%;min-width:236px;opacity:0三. 相對大小的字體字體不能使用絕對大小（px），而只能使用相對大小（em）。body {font: normal 100% Helvetica, Arial, sans-serif;}字體大小是頁面默認大小的100%，即16像素。像素(px)與倍數(em)的轉換；xx(em)=yy(px)/16;xx(px) = yy(em)*16;實例：12/16 = 0.75em; 0.875em*16 = 14px;四. 流動布局（fluid grid）"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。.container {width: 70%;margin:auto; }.col1,col2,col3,col4 {float: left;width:25%;}五. Media Query模塊1）加載*.css文件 <link type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />2）在現有CSS文件中加載。 @import url("tinyScreen.css") screen and (max-device-width: 400px);六. CSS的@media規則@media screen and (max-device-width: 400px) {.*{}#*{} }@media only screen and (max-width: 1200px) and (min-width:1024px){ }七、豎屏與橫屏的樣式1）豎屏時使用的樣式 @media all and (orientation:portrait) {.css{}}2）橫屏時使用的樣式 @media all and (orientation:landscape) {.css{}}八. 圖片的自適應（fluid image）img, object { max-width: 100%;}IE的專有命令 img { -ms-interpolation-mode: bicubic; }九、手機拍照和上傳圖片1）選擇照片 <input type=file accept="image/*">2）選擇視頻 <input type=file accept="video/*">十、消除transition閃屏.css{/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/-webkit-transform-style: preserve-3d;/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/-webkit-backface-visibility: hidden; }十一、開啟硬件加速解決頁面閃白，保證動畫流暢.css {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); }十二、背景圖自適應高寬.css{background:url(img.jpg) no-repeat center center; background-size:100% auto;}十三、字體引用@font-face {src: url('../en.eot');url('../en.woff') format('woff'), }十四、盒子： box-sizing:border-box;margin:0;padding:0十五、清除： .clear{clear:both;display:block;} .clearfix:before,.clearfix:after{content:'.';display:block;} .clearfix:after,{clear:both;} .clearfix{zoom:1;}十六、關于css3新特性1）text-overflow不顯示省略標記，而是簡單的裁切條.tit{text-overflow:clip; overflow:hidden; white-space:nowrap;} 當對象內文本溢出時顯示省略標記.tit_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} 2、圓角border-radius: xxpx;3、文本 text-emphasis 向元素的文本應用重點標記以及重點標記的前景色。 text-justify 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 text-outline 規定文本的輪廓。 text-overflow 規定當文本溢出包含元素時發生的事情。 text-shadow 向文本添加陰影。 text-wrap 規定文本的換行規則。 word-break 規定非中日韓文本的換行規則。 word-wrap 允許對長的不可分割的單詞進行分割并換行到下一行。3、邊框border-image 設置所有 border-image-* 屬性的簡寫屬性。 border-radius 設置所有四個 border-*-radius 屬性的簡寫屬性。 box-shadow 向方框添加一個或多個陰影。4、背景：background-size 大小 background-origin 區域（content-box）案例：layout.css@charset "utf-8";/*1em=16px 1px=0.0625px*/ /* `Basic HTML----------------------------------------------------------------------------------------------------*/ body{font:0.75em "微軟雅黑",Arial,"Liberation Sans",FreeSans,sans-serif; background:#99cc99;} body, html {font-size: 100%;padding: 0;margin: 0;} pre,code{font-family:"DejaVu Sans Mono",Menlo,Consolas,monospace;} hr{border:0 solid #ccc;border-top-width:1px;clear:both;height:0;} img, object { max-width: 100%; -ms-interpolation-mode: bicubic; } /* `Headings----------------------------------------------------------------------------------------------------*/ h1{font-size:2.5em;} h2{font-size:2.3em;} h3{font-size:2.1em;} h4{font-size:1.9em;} h5{font-size:1.7em;} h6{font-size:1.5em;} /* `Spacing----------------------------------------------------------------------------------------------------*/ ol{list-style:decimal;} ul{list-style:none;} ul,li,ol,dl,dd,p,hr,h1,h2,h3,h4,h5,h6,pre,table,address,fieldset,figure{margin:0px;padding:0px;} a,a:hover{ text-decoration:none;outline:none;color:#333; cursor:pointer;} *, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .fl{ float:left; display:inline;} .fr{ float:right; display:inline;} .tl{ text-align:left;} .tc{ text-align:center;} .tr{ text-align:right;} .pr{ position:relative;} .pa{ position:absolute;} .none{ display:none;} .db{ display:block;} .mt10{ margin-top:10px;} /* `Container----------------------------------------------------------------------------------------------------*/ .container,header{margin-left:auto;margin-right:auto;width:100%;-moz-box-align:center;-webkit-box-align:center;box-align:center;-moz-box-pack:center;-webkit-box-pack:center;box-pack:center} /* @media (max-width: 800px) {.container{width:674px;}} @media (min-width: 800px) and (max-width: 1204px) {.container {width:800px;background:#333;}} @media (min-width: 1204px) and (max-width: 1280px){.container {width:1204px;}} @media (min-width: 1280px) and (max-width: 1360px){.container {width:1204px;}} @media (min-width: 1360px) and (max-width: 1366px){.container {width:1360px;}} @media (min-width: 1366px) and (max-width: 1440px){.container {width:950px;}} @media (min-width: 1440px) and (max-width: 1600px){.container {width:1440px;}} @media (min-width: 1600px) and (max-width: 1680px){.container {width:1500px;}} @media (min-width: 1680px) and (max-width: 1920px){.container {width:1450px;}} */ .fluid {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;} .row {margin-right: -15px;margin-left: -15px;} /* `Grid >> Global----------------------------------------------------------------------------------------------------*/ .col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{display:inline-block;float:left;} /* `Grid >> Children (Alpha ~ First,Omega ~ Last)----------------------------------------------------------------------------------------------------*/ .alpha{margin-left:0;} .omega{margin-right:0;} /* `Grid >> 12 Columns----------------------------------------------------------------------------------------------------*/ .container .col1,header .col1{width:8.33333333%;} .container .col2,header .col2{width:16.66666667%;} .container .col3,header .col3{width:25%;} .container .col4,header .col4{width:33.33333333%;} .container .col5,header .col5{width:41.66666667%;} .container .col6,header .col6{width:50%;} .container .col7,header .col7{width:58.33333333%;} .container .col8,header .col8{width:66.66666667%;} .container .col9,header .col9{width:75%;} .container .col10,header .col10{width:83.33333333%;} .container .col11,header .col11{width:91.66666667%;} .container .col12,header .col12{width:100%;}/* `Clear Floated Elements----------------------------------------------------------------------------------------------------*/ .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;} .clearfix:before,.clearfix:after,.container:before,.container:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;} .clearfix:after,.container:after{clear:both;} .clearfix,.container{zoom:1;}

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的手机站CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。