最近项目中要做微信端网页开发,但是要做适屏,因为iphone4,5,6的屏幕有大有小,所以不同浏览器预览的效果也不一样,那怎样才能达到不同屏幕显示的效果也一样呢, 这个时候我们就要用到CSS3的rem特性,首先让我们认识一下到底REM是干嘛用的?以及如何来使用?
简介:
REM是相对单位,是相对HTML根元素。 这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。 目前,除了IE8及更早版本外,所有浏览器均已支持rem。
下面这段代码是我应用到项目中的CSS:
@media only screen and (min-width: 320px){
html {
font-size: 10px !important;/*10 ÷ 16 × 100% = 62.5%*/
}
}
@media only screen and (min-width: 370px){
html {
font-size:13px !important;
}
}
@media only screen and (min-width: 410px){
html {
font-size: 16px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 23px !important;
}
}
body{
font-family: '黑体';
background-color: #f8f8f8;
letter-spacing: -1px;
}
ul{
display:inline-block;
margin:0;
padding:0;
}
ul li{
float:left;
list-style: none;
}
a:visited{
color:#0E0E0E;
}
.weui_search_bar{
background-color: #fff;
}
.weui_search_outer{
background-color: #fff;
}
.weui_search_outer:after{
border: none;
}
.swiper-slide>img {
width: 100%;
}
.navbar{
}
.navbar ul{
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.navbar ul li{
width: 20%;
}
.navbar ul li a{
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.navbar ul li:nth-child(6+n){
margin-top: 10px;
}
.navbar ul li img{
width: 3.9rem;
}
.navbar ul li a .type{
font-size: 1.1rem;
padding:3px 0;
}
/*wonderful-recommend*/
.common-content{
padding: 0 10px;
margin-top: 15px;
}
.common-header{
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 1.2rem;
padding-bottom:10px;
border-bottom: 1px solid #EFF0F0;
}
.common-header .left{
display: flex;
align-items: center;
}
.common-header .left img{
width: 1.2rem;
}
.common-header .left .title{
margin-left:5px;
font-size: 1.2rem;
}
.common-header .right{
display: inline-block;
}
.common-header .right .more{
color:#FF4B00;
font-size: 1rem;
}
.wonderful-recommend{
margin-top: 20px;
}
.wonderful-recommend .list{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 .5rem;
}
.wonderful-recommend .list li{
width: 33%;
margin-top: 15px;
}
.wonderful-recommend .list li a{
width: 100%;
display: inline-flex;
align-items: center;
flex-direction: column;
}
.wonderful-recommend .list li a img{
width: 90%;
}
.wonderful-recommend .list li a .name{
font-size: 1rem;
width: 85%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding: 5px 0;
}
.wonderful-recommend .list li a .bottom{
display: flex;
align-items: center;
justify-content: center;
}
.wonderful-recommend .list li a .bottom img{
width: .5rem;
}
.wonderful-recommend .list li a .bottom .view-count{
color: #808080;
font-size: 1rem;
margin-left: 5px;
letter-spacing: normal;
}
/*album-recommend*/
.album-recommend{
margin-top: 20px;
}
.album-recommend .common-header{
border: none;
}
.album-recommend .list{
display: inline-flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 1.2rem;
}
.album-recommend .list li{
width: 47%;
margin-bottom: 10px;
}
.album-recommend .list li a{
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
border: 1px solid #E1E1E1;
padding: 6px;
border-radius: 2px;
}
.album-recommend .list li a img{
width:100%;
}
.album-recommend .list li a .name{
font-size: 1.1rem;
letter-spacing: -1px;
}
/*support-commodity*/
.support-commodity{
margin-top: 15px;
}
.support-commodity .common-header{
border: none;
}
.support-commodity .list{
display: inline-flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 1.2rem;
}
.support-commodity .list li{
width: 47.8%;
margin-bottom: 10px;
}
.support-commodity .list li a{
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #F0F0F0;
padding: 7px;
border-radius: 2px;
}
.support-commodity .list li a img{
width:100%;
}
.support-commodity .list li a .name{
font-size: 1rem;
padding-top: 3px;
}
.support-commodity .list li a .price-content{
font-size: 1rem;
display: flex;
color: #FF0000;
align-items: center;
}
/*footer*/
footer{
border-top: 1px solid #E0E0E0;
display: flex;
align-items: center;
justify-content: center;
}
footer a{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px;
width: 50%;
}
footer a:first-child{
border-right: 1px solid #e0e0e0;
}
footer a img{
width:1.4rem;
}
footer a .title{
color:#499D11;
font-size: 1.2rem;
margin-left: 5px;
}
参考地址:
http://www.w3cplus.com/css3/define-font-size-with-css3-rem
http://isux.tencent.com/web-app-rem.html
http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html