当前位置: 首页 > Web前端 > HTML5

手机端使用rem+scss适配

时间:2023-04-04 23:06:52 HTML5

设置meta标签//上面是清除浏览器缓存的搜索//忽略page中的数字是电话号码,忽略email标识-屏幕模式浏览;//iphone的私有标签,指定iphone中safari顶部状态栏的样式;在webapp应用程序状态栏下(屏幕顶部状态栏的颜色);默认值为default(白色),可以设置为black(黑色)和black-translucent(灰色半透明)。注意:如果值为“black-translucent”,会占据页面的px位置,悬浮在页面上方(会覆盖页面高度20px——iphone4和itouch4的Retina屏幕是40px)。//去除winphone系统a,点击input标签时产生的半透明灰色背景//强制文档的宽度适合device宽度保持1:1,文档最大宽度比例为1.0,不允许用户点击屏幕放大;width-视口的宽度height-视口的高度initial-scale-初始缩放比例minimum-scale-允许用户缩放到的最小比例maximum-scale-允许用户缩放到的最大比例user-scalable-用户是否可以手动缩放js设置的html默认字体大小(写在htmlhead中)setscssfilepxtorem//默认16是html的默认字体大小//默认750是设计稿的默认宽度//$n是测量设计稿的距离@字符集“UTF-8”;@functionrem($n){@return$n/(750/16)+rem;}编辑方便调用的函数:@functiongetTop($n){@return($n-1206/2)/(750/16)+rem;}@functiongetLeft($n){@return($n-750/2)/(750/16)+rem;}@functiongetRight($n){@return(($n-750)/2)/(750/16)+rem;}@mixincenter($left,$top){//居中左右并改变位置:绝对;左:50%;顶部:rem($top);保证金:000getLeft($left);}@mixincenterlt($left,$top){//上下左右中心位置:absolute;左:50%;顶部:50%;margin:getTop($top)00getLeft($left);}@mixincenterrt($right,$top){//上下左右中心位置:absolute;右:50%;顶部:50%;margin:getTop($top)getRight($right)00;}@mixinmiddlert($right,$top){//上下中右改变position:absolute;右:rem($right);顶部:50%;margin:getTop($top)000;}@mixincenterb($left,$bottom){//居中左右向下position:absolute;左:50%;底部:rem($底部);margin:000getLeft($left);}@mixinleftTop($left,$top){//从左到上的变化position:absolute;左:rem($left);top:rem($top);}@mixinrightTop($right,$top){//从右到上的变化position:absolute;右:rem($right);top:rem($top);}@mixinleftBottom($left,$bottom){//右上变化position:absolute;左:rem($left);bottom:rem($bottom);}调用上面的函数(宽高距离可以ps测量,默认设计稿宽度为750):.page1-img1{width:rem(473);高度HT:雷姆(173);@includecenterlt(139,767);}