苏州网站建设系统电话,西安市高新区建设局网站,wordpress自适应手机端,换模板搭建网站怎么做适配问题
怎么适配iphone6 1px问题
为什么页面与设计稿会出现偏差#xff1f; dpr设备像素/ css像素#xff0c;只有dpr等于1的时候#xff0c;实际效果和设计稿的尺寸比例才是1:1。因为iPhone6的DPR#xff08;设备像素比#xff09;为2#xff0c;设备像素为750…适配问题
怎么适配iphone6 1px问题
为什么页面与设计稿会出现偏差 dpr设备像素/ css像素只有dpr等于1的时候实际效果和设计稿的尺寸比例才是1:1。因为iPhone6的DPR设备像素比为2设备像素为750所以iPhone6的理想视口尺寸为375px。
因为设计稿是基于设备像素页面是基于css像素的。css中的宽度是基于理想视口的宽度375px设计图上是基于设备宽度750px所以尺寸不对。 怎么处理 init-scale0.5 。缺陷但是宽度不能自适应⭐️rem大法
基于
html标签的
font-size设置的手淘的做法
把缩放尺寸设置成dpr的倒数。
读设备宽度动态设置meta标签的 content属性中的
maximun,
minimum,
user-scable值html
headtitle/titlemeta charsetutf-8 /meta nameviewport content /stylebody{margin: 0;padding: 0;}.box{width: 2.66666667rem;height: 2.66666667rem;background: red;}/style
/head
bodydiv classbox/divscriptvar scale 1 / window.devicePixelRatio;document.querySelector(meta[nameviewport]).setAttribute(content,widthdevice-width,initial-scale scale , maximum-scale scale , minimum-scale scale , user-scalableno);document.documentElement.style.fontSize document.documentElement.clientWidth / 10 px;/script
/body
/html
网易的做法
现在的设计稿都是750px宽度p6的宽那要想实现
css样式设计图1100 这种比较方便的折算方式font-size就要设置成7.5px也就是说
1rem 7.5pxhtml
headtitle/titlemeta charsetutf-8 /meta nameviewport contentwidthdevice-width,initial-scale1,maximum-scale1,user-scalableno /stylebody{margin: 0;padding: 0;}.box{width: 2rem;height: 2rem;background: red;}/style
/head
bodydiv classbox/divscriptdocument.documentElement.style.fontSize document.documentElement.clientWidth / 7.5 px;/script
/body
/html
总结
rem是为了实现移动端自适应布局。通过在
html元素下设置
font-size定义。另外手淘的做法是通过判断设备的dpr将缩放规模scale设置为dpr的倒数再用js动态设置
meta标签的
content属性和font-size基准值的大小。网易的做法是禁用用户缩放scale始终为1将font-size设置为625%即 1rem100px。 1px问题
如何实现移动端的1px边框
方法一transformY:scale(50%)
方法二
border-width:0 0 2px 0;
border-image:url(xxx.png) 0 0 2 0 stretch // 图片地址 上下剪切 左右剪切 上下边宽 左右边宽 图片拉伸 vm/vh rem大法
vm/vh是未来的趋势
rem方式弊端需要动态计算根字体大小
做法用vm/vh来计算根字体大小剩下的自适应布局依旧按照rem的方法
用vm/vh做适配页面
⭐️关于vm/vh
1. 与%百分比的区别
vm/vh 是基于视窗的 %基于父元素
2. 使用场景
随着页面不同文字图片缩小放大适配页面
3. 与rem的区别
vm/vh没有最大、最小宽大的限制设备很小的时候图文会缩得特别特别小……
措施
1.解决背景过小问题
body{min-width:xxx px;max-width: xxx px;
}
2.媒体查询限制根文字大小解决文字过小问题 html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同时通过Media Queries 限制根元素最大最小值 media screen and (max-width: 320px) { font-size: 64px; } media screen and (min-width: 540px) { font-size: 108px; } }本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id0bchaatitle移动端适配问题
