移动端web开发常见问题.docVIP

移动端web开发常见问题 常见问题 1、移动端如何定义字体font-family 三大手机系统的字体： ios系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 android 系统 默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 winphone 系统 默认中文字体是Dengxian（方正等线体） 默认英文和数字字体是Segoe 无微软雅黑字体 各个手机系统有自己的默认字体，且都不支持微软雅黑 如无特殊需求，手机端无需定义中文字体，使用系统默认 英文字体和数字字体可使用Helvetica ,三种系统都支持 *移动端定义字体的代码7 body{font-family:Helvetica;} 2、移动端字体单位font-size选择px还是rem 对于只需要适配手机设备，使用px即可 对于需要适配各种移动设备，使用rem,例如只需要适配iPhone和iPad等分辨率差别比 较挺大的设备 rem配置参考： html {font-size: 10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } } 3、什么是Retina显示屏，带来了什么问题 retina： 一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点rtl 1个变为多个, 如在同样带下的屏幕上，苹果设备的retina显示屏屮，像素点1个变为4个 在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通，\设计为传: PC的2倍 那么，前端的应对方案是： 设计稿切出来的图片氏宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2 〃例如图片宽高为：200px*200px,那么写法如下 .css{width:100px;height:100px;background-size:1 OOpx 10Opx;} 其它元素的取值为原来的1/2,例如视觉稿40px的字体，使用样式的写法为20px .css{font-size:20px} viewport 模板 !DOCTYPE html html head meta charset=nutf-8H meta con tent=nwidth=device-width5initial-scale=1 ? 0,maximum-scale=1.05user-scalable=non n ame=,,viewportH meta content=nyesM name=Happle-mobile-web-app-capableH meta content=ublackH name=Happle-mobile-web-app-status-bar-stylen meta content=,,telephone=noH name=l,format-detectionit meta content=Hemail=noM name=,,format-detectionH vtitle 标题 v/title link rel=nstylesheetM href=Hindex.cssH /head body 这里开始内容 /body /html 优先使用最新版本IE和Chrome meta http-equiv=HX-UA-Compatiblen content=,,IE=