Webapp开发之meta与css代码部署-职坐标

Webapp开发之meta与css代码部署

白羽 2018-06-14 来源：网络阅读 628 评论 0

摘要：本文将带你了解Webapp开发之meta与css代码部署，希望本文对大家学WEBAPP有所帮助。

1、页面头部标签申明

1 <!DOCTYPE html> 2 <html xmlns="//www.w3.org/1999/xhtml" id="test"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5  6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" /> 8  9 <meta name="MobileOptimized" content="320">10 11 <meta http-equiv="pragma" content="no-cache">12 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">13 <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">14 15 <meta content="telephone=no, address=no" name="format-detection" />16 17 <meta name="apple-mobile-web-app-capable" content="yes" />18 19 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />20 21 <title>手机webApp</title>22 23 26 27 31 </head>

2、css中解决手机WebApp字体和图片等标签问题

1 /* 禁用iPhone中Safari的字号自动调整 */2 html { -webkit-text-size-adjust: none; }3 /* 设置HTML5元素为块 */4 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }5 /* 设置图片视频等自适应调整 */6 img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }7 .video embed, .video object, .video iframe { width: 100%; height: auto; }

3、css重置样式

参考：//www.cnblogs.com/caojiayan/p/6343917.html

1 /* CSS Document */ 2 html, body, div, span, object, iframe,h1, h2, 3 h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, 4 em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, 5 ol, ul, li,fieldset, form, label, legend,table, caption, tbody, 6 tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption, 7 figure, footer, header, hgroup, menu, nav, section, summary,time, mark, 8 audio, video { 9 margin:0;10 padding:0;11 border:0;12 outline:0;13 font-size:100%;14 vertical-align:baseline;15 background:transparent;16 outline-style:none;/*FF*/ 17 }18 19 body {20 line-height:1;21 }22 23 a{24 margin:0;25 padding:0;26 border:0;27 font-size:100%;28 vertical-align:baseline;29 background:transparent;30 31 }32 a:hover,a:focus{33 text-decoration:none;34 bblr:expression(this.onFocus=this.blur());/*IE*/35 outline-style:none;/*FF*/ 36 }37 table {38 border-collapse:collapse;39 border-spacing:0;40 }41 42 input, select {43 vertical-align:middle;44 }45 46 /*css为clearfix，清除浮动*/47 .clearfix::before,48 .clearfix::after{49 content: "";50 height: 0;51 line-height: 0;52 display: block;53 visibility: hidden;54 clear: both;55 }56 .clearfix:after{clear:both;} 57 .clearfix{ 58 *zoom:1;/*IE/7/6*/59 }

4、关于不同设备的媒体查询

1 /* 2 * ----------------------------------------- 3 * 320 ~ 480 4 * ----------------------------------------- 5 */ 6 @media only screen and (min-width: 320px) and (max-width: 480px) { 7 8 } 9 10 /* 11 * ----------------------------------------- 12 * 321 ~ 宽大于321的设备 13 * ----------------------------------------- 14 */ 15 @media only screen and (min-width: 321px) { 16 17 } 18 19 /* 20 * ----------------------------------------- 21 * ~ 320 宽小于320的设备 22 * ----------------------------------------- 23 */ 24 @media only screen and (max-width: 320px) { 25 26 } 27 28 /* 29 * ----------------------------------------- 30 * ~ 480 宽小于480的设备 31 * ----------------------------------------- 32 */ 33 @media only screen and (max-width: 480px) { 34 35 } 36 37 /* medium screens (excludes iPad & iPhone) */ 38 /* 39 * ----------------------------------------- 40 * 481 ~ 767 宽大于480且小于767的iPad和iPhone 41 * ----------------------------------------- 42 */ 43 @media only screen and (min-width: 481px) and (max-width: 767px) { 44 45 } 46 47 /* ipads (portrait and landscape) */ 48 /* 49 * ----------------------------------------- 50 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone 51 * ----------------------------------------- 52 */ 53 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 54 55 } 56 57 /* ipads (landscape) */ 58 /* 59 * ----------------------------------------- 60 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone 61 * ----------------------------------------- 62 */ 63 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { 64 65 } 66 67 /* ipads (portrait) */ 68 /* 69 * ----------------------------------------- 70 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone 71 * ----------------------------------------- 72 */ 73 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { 74 75 } 76 77 /* 78 * ----------------------------------------- 79 * 1444 ~ 1824 宽大于1444且小于1824的设备 80 * ----------------------------------------- 81 */ 82 @media only screen and (min-width: 1444px) and (max-width: 1824px){ 83 84 } 85 86 /* 87 * ----------------------------------------- 88 * 1824 ~ 宽大于1824的设备 89 * ----------------------------------------- 90 */ 91 @media only screen and (min-width: 1824px) { 92 93 } 94 95 /* 96 * ----------------------------------------- 97 * 2224 ~ 宽大于2224的设备 98 * ----------------------------------------- 99 */100 @media only screen and (min-width: 2224px) {101 102 }103 104 /* iphone 4 and high pixel ratio (1.5+) devices */105 /*106 * -----------------------------------------107 * iphone4 ~108 * -----------------------------------------109 */110 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {111 112 }113 114 /* iphone 4 and higher pixel ratio (2+) devices (retina) */115 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {116 117 }

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！

webapp教程移动端web开发 web移动端开发框架

本文由 @白羽发布于职坐标。未经许可，禁止转载。