Question

Greetz ppl，我是Ionic框架的新手。作为一个初学者，我在我的约会应用程序中犯了一些重要的错误，我仍在开发中。由于我的应用程序没有响应式开发方法，因此我不得不在大多数模板上重写和更改很多CSS。我来自前端开发世界，并没有那么多的移动应用程序。

当我意识到我的应用程序仅在少数设备上运气良好时，我开始使用媒体查询以支持不同的屏幕。但是我遇到了一个问题。一直在为很多设备编写和添加新的媒体查询，并意识到这样的工作我无法涵盖所有这些。所以我尝试了自己的内容相关媒体查询，并在适合我和内容中断时开始制作断点。

但是我还有一个问题，即很多设备都没有被覆盖，设计也被搞砸了。

你如何解决这个问题？您是否有一些常用的方法来处理不同的屏幕尺寸，密度？你如何与dpi，ppx，px，％，max-width，max-device-width等进行战斗......

处理所有这些问题的最佳方法是什么？媒体查询是否有更好的解决方案？如何实现我的模板在所有不同的设备上看起来相同/几乎相同???

我希望听到响应式移动应用的不同类型的可能解决方案。

更新：

因此，当我忘记添加一些代码示例时，我认为这就是为什么我没有为这个问题获得更多有能力的开发人员。

假设我有一个看起来像这样的观点：

Sample image

关于页面上的UI元素，您可以看到其中一些不是离子组件，只是一些自定义设计元素。

所以我们有标题可以在所有设备屏幕上运行良好，后台img也不会有问题。

但如果我们专注于主要内容，我们会自定义照片图片，自定义上传照片btn，步骤指示器以及底部的一个大btn。

查看此页面：

 <ion-view name="signupPhotos" class="signup-view" cache-view="true" ng-init="showCurrentStep(currentStep)"><ion-content scroll="false" class="padding background-view">
<div class="bar bar-assertive header-view">
  <a class="button back-button" ng-click="previousStep()">
    <i class="icon icon-left ion-chevron-left"></i>
  </a>
  <h1 class="title">{{'signup_account_setup_title' | translate}}</h1>
</div>`
<div class="step-icon">
  <div class="photo-icon"></div>
</div>
<div class="row form-wrapper"> 
  <div class="col">

    <form name="photos_form" class="signup-form" novalidate>
      <div class="form-fields-outer list-inset">

        <p class="text-center main-label">{{'photo_label' | translate}}</p>

        <div class="separator"></div>

        <!-- <p class="text-center subtext-label">{{'photo_sub_label' | translate}}</p>
        //dummy text, just for test, will be removed-->
        <p class="text-center subtext-label">Some test test test test test test test text text text text text
          text</p>

        <div class="user-photo" align="center">
          <img ng-src="{{regdata.imgSrc}}" ng-if="regdata.imgSrc" class="left user-signup-img" ng-click="uploadUserPhoto()"/>
          <button type="button" class="button upload-button" ng-if="!regdata.imgSrc" ng-click="uploadUserPhoto()">
            <div class="plus-icon"><i class="ion-ios-plus-outline"></i></div>
            {{ "upload_photo" | translate }}
          </button>
        </div>

      </div>
    </form>

    <div class="circles slider-pager">
      <span ng-repeat="slide in slidesData.steps">
        <span class="slider-pager-page {{slide.state}}">
          <i class="icon ion-record"></i>
        </span>
      </span>
    </div>

    <button type="submit" class="sign-up button button-full icon-right ion-chevron-right" ng-click="nextStep()"
            ng-disabled="photos_form.$invalid">
      {{ submitButtonText }}
    </button></div></div></ion-content></ion-view>

所以主要内容在几个手机分辨率上会看起来很不错，让我们说这个iPhone 6s屏幕是我们设计这个视图的基础。所以6,6s，6 +和6s +都会很好。与他们相似的可能是Nexus 5,6和Galaxy 5,6,7具有相同的布局。

当我们达到iPhone 4s，5s或更大的屏幕，如Nexus 7,10平板电脑或iPad Pro，iPad Mini时，我们将在整个地方拥有大量的螺丝元素。因此，我必须弄脏媒体查询，以重新排列按钮和其他元素。

关键是如果我有大量的屏幕和大量不同的屏幕分辨率，我们就会在处理css和写少量边距时丢失大量时间，填充修复很多次。

你如何处理这个问题，你是否在一些宽度，高度值上创建了几个断点，或者你有其他方法吗？

多个屏幕 - 处理不同的屏幕分辨率 - 媒体查询

0 个答案: