移动端开发需要加的meta和常用的css3媒体查询样式
目录
文章目录隐藏
今天的内容没有难点,只是将我日常在项目中开发需要用到的一些必备的代码分享给大家,下次开发项目的时候直接拿来用就可以了,省时省力,节约开发时间。我觉得我们每个开发人员都应该养成一种时时刻刻记录笔记的习惯,不仅是为了工作方便,也是为了自己后期查找提供方便,毕竟年纪大了,时间长了容易忘事,嘿嘿。
移动端开发需要加的 meta 和常用的css3 媒体查询样式
移动开发中头部要加的一些常用 meta
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width"> <meta content="telephone=no" name="format-detection"> <meta name="applicable-device" content="mobile"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no,email=no">
css 自适应不同型号手机设备
iphone 4 和 4s
@media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:2){}
不过目前用 iphone 4 类型的手机少了,毕竟烧肾的 iPhone XS Max 都已经出了。
iphone 5 and 5s
@media only screen and (min-device-width:320px) and (max-device-width:568px) and (-webkit-min-device-pixel-ratio:2){}
Android width360
@media only screen and (min-device-width:360px) and (max-device-width:640px){ html {font-size:112.5px;} }
android width411
@media only screen and (min-device-width:400px) { html {font-size:128.4375px;} }
iphone 6+
@media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2){ html {font-size:117.1875px;} }
iphone 6
@media only screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2){ html {font-size:129.375px;} }
初始化 css
*{ -webkit-tap-highlight-color:transparent;outline:0;margin:0;padding:0;vertical-align:baseline;fone-size:inherit;line-height:inherit;} body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,li,pre,form,field,legend,button,input,textarea,th,td{margin:0,padding:0,vertical-align:baseline;} i,em{font-style:normal;} ol,ul{list-style:none;} h1,h2,h3,h4,h5,h6,strong,b{font-weight:normal;} input,select,button,h1,h2,h3,h4,h5,h6{font-size:inherit;font-family:inherit;} table{border-collapse:collapse;border-spacing:0;} a{text-decoration:none;color:#666;} body{margin:0 auto;min-width:320px;max-width:640px;height:100%;font-family:Microsoft Yahei,Helvetica;line-height:1.5;color:#666;-webkit-text-size-adjust:100%!importtant;text-size-adjust:100% !important;} textarea{resize:none;} input[type="text"],input[type="tel"],input[type="button"],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:nione;} body{font-size:0.14rem;-webkit-overflow-scrolling:touch;} html{box-sizing:border-box;font-size:100px;height:100%;-webkit-text-size-adjust:none} *,*:before,*:after{content:"020",display:block;height:0;overflow:hidden;clear:both}
以上就是我为大家整理的移动设备常用的 meta 和常用的css3 媒体查询样式,希望对大家有所帮助,一年一度的双十一 11.11 刚刚过去,不知你的小心脏是否还在砰砰的跳个不停,收收心,动动小手保存下来,对你的开发大大有帮助哦!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 移动端开发需要加的meta和常用的css3媒体查询样式
码云笔记 » 移动端开发需要加的meta和常用的css3媒体查询样式
以后开发节省时间