在写移动端页面的布局的时候是按照iphone6的尺寸写的，在iphone5中因为宽度的问题导致样式错乱

在写移动端页面的布局的时候是按照iphone6的尺寸写的，在iphone5中因为宽度的问题导致样式错乱。

如下所示是ratings.vue中的<template>内容

<template><!--评价页的高度可能会超过页面，所以需要bette-scroll--><!--在内容真正开始的地方，其外部会有一个div包裹--><div class="ratings"> <!--父元素的高度要固定高度--><div class="ratings-content"> <!--子元素这里是better-scroll实例化的对象--><div class="overview"><div class="overview-left"><h1 class="score">{{seller.score}}</h1><div class="title">综合评分</div><div class="rank">高于周边商家{{seller.rankRate}}%</div></div><div class="overview-right"><div class="score-wrapper"><span class="title">服务态度</span><star :size="36" :score="seller.serviceScore"></star><span class="score">{{seller.serviceScore}}</span></div><div class="score-wrapper"><span class="title">商品评分</span><star :size="36" :score="seller.foodScore"></star><span class="score">{{seller.foodScore}}</span></div><div class="delivery-wrapper"><span class="title">送达时间</span><span class="delivery">{{seller.deliveryTime}}分钟</span></div></div></div></div></div>
</template>

如下所示是ratings.vue中的<style>中的内容

<style lang="stylus">.ratingsposition:absolutetop:174px       /*这是.header + .tab的高度*/bottom:0        /*设成绝对定位，设置top和bottom的值，就相当于设定固定的height*/left:0width: 100%overflow:hidden.overviewdisplay: flexpadding:18px 0.overview-leftflex:0 0 137pxpadding:6px 0width:137px   /*设置兼容性*/border-right:1px solid rgba(7,17,27,0.1)text-align :center.scoremargin-bottom:6pxline-height:28pxfont-size:24pxcolor:rgb(255,153,0).titlemargin-bottom:8pxline-height:12pxfont-size:12pxcolor:rgb(7,17,27).rankline-height:10pxfont-size:10pxcolor:rgb(147,153,159).overview-rightflex:1padding:6px 0 6px 24px.score-wrappermargin-bottom:8pxfont-size:0.title,.star,.scoredisplay:inline-block  /*设置这两个是因为有些是文字，有些是图片*/vertical-align: top   /*这样就能对齐*/line-height:18px.titlefont-size:12pxcolor:rgb(7,17,27).starmargin:0 12px.scorefont-size:12pxcolor:rgb(255,153,0).delivery-wrapperfont-size:0.title            /*.title，.delivery没有设置display:inline-block，*/line-height:18px   /*vertical-align: top，是因为他们都是文字，会自动对齐*/font-size:12pxcolor:rgb(7,17,27).deliverymargin-left:12pxfont-size:12pxcolor:rgb(147,153,159)
</style>

在浏览器上选择iphone6的显示效果如下

从上面可以看出布局一切正常。下图是iphone5中显示的样式：

从上图可以看出右边的红色圈中的布局已经错乱了，那是因为样式尺寸是按照Iphone6的宽度设置的，而iphone5的宽度较小，所以导致页面宽度不够，布局显示错乱的现象。

解决的方法：使用@media查询，缩小左边的div的宽度以及右边div的padding-left的值，如下图所示

在iphone5下的显示效果

这样就ok了，在其他模式下显示和没有加@media查询之前一样

在写移动端页面的布局的时候是按照iphone6的尺寸写的，在iphone5中因为宽度的问题导致样式错乱相关推荐

html5 移动端单页面布局,移动端单页布局-如何更好的自适应各尺寸屏幕
#### 移动端单屏布局 > 本篇不属于汇总类的文章,而是把自认为最优的解决方案来进行一些说明. #### 为什么会有单屏布局作为一个前端开发者,我是实在没有理解单屏布局的优势在哪里,尤其是要 ...
淘宝触屏版适配代码，趴下来以后写移动端页面的时候可以参考下
顺便说几个属性: 1.window.devicePixelRatio 它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素.css ...
pc端以及移动端页面响应布局，同比例缩放
一.用rem方法响应布局(网页屏幕大小和分辨率有关一般分为几档) 1.查看屏幕大小用并设置min-width或者max-width 以及设置html的font-size大小(大小设置主要是分份数比如 ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
淘宝——移动端页面终端适配
注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录适配的要求适配的方法,3个步骤适配中背景图片的处理适配的原理解析摘 ...
flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
移动端 flexible.js 布局详解
原本想直接引入原文链接,但是又担心作者哪天想不开注销账号,这么好的一篇文章看不到了,还是转载一下吧(/ω＼). 另外推荐一篇好文:移动端rem自适应实操讲解本文讲的通过 flexible.js 实现 ...
简单粗暴的移动端页面开发技能
移动端响应式页面开发说简单也简单,根据屏幕尺寸调节根字体大小. 大宽度用%,高度和小宽度全部使用rem,简单粗暴. 之前阅读过大漠老师的使用Flexible实现手淘H5页面的终端适配,介绍了手淘项目的 ...
移动端页面自适应解决方案—rem布局(进阶版)
之前的一篇<手机端页面自适应解决方案-rem布局>随着时间的推移,该方案已然过时,故为大家介绍一个目前我极力推荐使用的,更加完美的方案--rem布局(进阶版) 该方案使用相当简单,把下面这 ...

在写移动端页面的布局的时候是按照iphone6的尺寸写的，在iphone5中因为宽度的问题导致样式错乱

在写移动端页面的布局的时候是按照iphone6的尺寸写的，在iphone5中因为宽度的问题导致样式错乱相关推荐

最新文章

热门文章