以下都是自己用过的,问题挺多,担心忘了所以来总结一下,欢迎大家指点,嘿嘿
1.rem布局
说起rem,刚开始接触觉得好牛逼呀,有了它各种手机适配统统搞定,但是踩了好多坑,当时项目紧张,终于完成,第二天就告知有些手机无法适配,当时还在想啥破玩意手机辣么多问题,心塞,心塞,心塞,说正经的
刚开始用的时候我基本都是根据设计稿,手动换算成rem,之后我就用了scss,一下所有的适配我都用了scss,我觉得scss特别好,写css时候不仅速度快,而且终于不用想名字了,不用想那些各种class名字太美好了,所以给大家推荐用scss,使用它换算.(推荐可以用webstorm使用scss不用配置辣么多的环境了,虽然我最喜欢用的是sublime,轻便,webstorm一打开,再打开Ps我的电脑就彻底报废了)
1.1使用css3的媒体查询
首先rem是指相对于根元素的字体大小的单位,所以可以通过设置html的字体大小来可以控制rem的大小
@charset "utf-8";
@import "px2Rem";
@media screen and (min-width:321px) and (max-width:375px) {
html {
font-size: 12px
}
}
@media screen and (min-width:376px) and (max-width:414px) {
html {
font-size: 13px
}
}
@media screen and (min-width:415px) 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) {
html {
font-size: 25px
}
}
@import 是scss引入scss文件的一种写法,‘px2Rem’是一个公有的scss,用来把px转换成rem,每一个scss都引入这个公有的即可,以下是设计稿为750px的写法:(为啥除以24我也忘了,几个月之前写的,但是只要是750px的设计稿就是这样,谁要是知道可以告诉我,谢谢)
除了以上这两个公有的css其余都正常写,例如以下,每次写上px都是:px2Rem(量取的px),如下
@charset "utf-8";
@import "px2Rem";
@import "common";
#banner{
height: px2Rem(443);
width: 100%;
img{
width: 100%;
height: 100%;
}
}
#introduce{
width: 100%;
background:#f2f4f7 ;
.intro_up{
width: 100%;
height: auto;
background: url("../images/js_tc.png") no-repeat center center;
background-size: 100% 100%;
box-sizing: border-box;
margin-bottom: px2Rem(11);
p{
display: flex;
display: -webkit-flex;
align-items: center;
padding: px2Rem(31) px2Rem(7.5) px2Rem(20) px2Rem(7.5) ;
border-bottom: px2Rem(2) solid #eee;
font-size: px2Rem(30);
i{
width: px2Rem(71);
height: px2Rem(49);
background: url("../images/jianjie-.png") no-repeat center center;
background-size: 100% 100%;
margin-right: px2Rem(19);
margin-left: px2Rem(34.5);
}
}
总结:这个方法适配不管是微信,还是手机目前都适配,测试过华为,oppo,iphone,ipad,中兴,型号都木有错。
1.2js动态设置html的fontsize大小
动态加载meta标签设置html的fontsize
var scale = 1 / window.devicePixelRatio;
var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
document.querySelector('head').appendChild(meta);
var fontSize = document.documentElement.clientWidth/10;
document.querySelector('html').style.fontSize = fontSize +'px';
写一个共有的scss,换算px
$designWidth:750;
$remCount:10;
@function px2Rem($px){
@return $px/$designWidth*$remCount * 1rem
}
之后调用的方法就和第一个方法一样
总结:这是我最开始使用的,不管是微信端还是浏览器都是相当不错,但是后来发现对于一些oppo,中兴手机的部分型号不适配,听朋友说还有华为的p9,解决的方法就是判断,然后重新计算fontsize。
1.3淘宝的flexible.js
首先我想说的是,这里我也用了sass:
第一步:引入一个flexible.js(木有写Meta这个标签)
第二步:写一个共有的common.scss
@function px2Rem($px){
@return $px/(750/10) * 1rem
}
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
第三步:在index.scss引用common.scss(本来我准备用rem写字体大小,但是听说rem换算的字体不好看就用px吧)
@charset "utf-8";
@import "common";
*{
margin: 0;
padding: 0;
max-height: 9999999px;
}
ul{
list-style: none;
width: 100%;
height: px2Rem(100);
background: pink;
@include font-dpr(17px);
text-align: center;
line-height: px2Rem(100);
}
li{
display: inline-block;
}
article{
@include font-dpr(10px);
}
总结:这种方法的使用网上应该很多,比我详细,以上是我的方法,大同小异。
2.百分比+弹性盒布局
不管是用哪种布局我都习惯性用弹性盒布局,display:flex,我觉得相当的美好,不用一点点的去量宽度,而且可以替换浮动,也不用清除浮动,不管是PC还是移动都是不错的,有时候懒得用rem我就是用百分比+弹性盒,但是,各位请注意,兼容性问题考虑一下,弹性盒的集中兼容写法注意一下,手机端感觉是各种通用的,浏览器兼容一般,主流OK的,但是IE10以下估计完蛋。
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
//垂直居中
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
//子元素分割
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
总结:没有辣么严格的兼容要求,这个简直棒棒哒。
3.直接使用一种标签
直接在页面写以下三句话
如果设计图是640直接就把width写成了640px,然后按照设计图量取的px直接写就可以了
总结:目前自己测试的结果是没有出现不适配的,字体也写成px,相当的方便,就是只限制于宽度适配,高度会出现偏差,但是如果项目允许出现滚动条就完全不碍事,不影响布局啥的,但是如果想做h5页面那种一屏一屏的不带滚动的,不建议你使用,说好的高度有偏差,直接用百分比或者rem吧。
关于字体的显示大小,与在CSS中指定的大小不一致
说明:之前用rem做的一个项目,一个段落的字数超过了一定数量,字体的大小立马就变大了,我明明写的是16px的字体,进入比32px都大,瞬间无语了,后来可劲找,在github找到了方法,https://github.com/amfe/article/issues/10#issuecomment-305942512(这是那个人的详解)。
解决方法:
方法1.max-height:99999999999px;
方法2. text-size-adjust: none;(兼容性不好,毕竟是属于新属性)
html,body,div,span,p,i,img,a,h1,h2,h3,h4,h5,h6,dd,dl,dt,header,footer,article,ul,li{
margin: 0;
padding: 0;
max-height: 999999px;
text-size-adjust: none;
-webkit-text-size-adjust:none;
}
关于在微信端使用rem布局的时候,底部会出现内容不全面,或者滚动的时候中间内容不全面
说明:例如顶部和底部固定,中间滚动,但是在微信端,应该是页面计算了微信端固定的顶部,所以会出现底部内容不全面
解决方法:中间不写固定高度,只写margin-bottom和margin-top.
body{
display:flex;
flex-direction: column;
}
header,footer{
flex:1;
position:fixed
}
目前就这么多,其他的没想到,好久了,小菜鸟一枚,先记录下来,然后慢慢改正,完善,欢迎挑刺,毕竟我的问题太多。