I recently tried to use bootstrap for mobile development and found some problems. I would like to write some of my ideas and questions here? -

Source: Internet
Author: User
First, for mobile terminals, loading bootstrap's jscss itself is relatively cumbersome. The other is that bootstrap's support for mobile terminal layout is quite limited, just based on its own style, for example, if you set the width and height of a div to PX, the width and height of a div, including pc, or PX, will not be zoomed in or out on different screens, if rem is used, why should I add mediaquery to bootstrap. Bootstrap development on the Mobile End, especially the precise layout, I personally feel that, first of all, loading the js css of bootstrap on the Mobile End is heavy, another is that bootstrap's support for mobile terminal layout is quite limited, just based on its own style. For example, if you set a p, the width and height are all PX, in different screens, the width and height of the pc are still PX, and will not be zoomed in or out at all. If rem is used, I will simply add media query and use bootstrap. Bootstrap has many problems in mobile development, especially accurate layout.

The recent rise of rem + media query for mobile development, I have also done a project using this solution, indeed good, in mobile development page layout compatibility is indeed better. And lightweight. The responsive layout of bootstrap is also based on this media query solution.

I feel that if mobile development is purely about giving up bootstrap, or the focus of bootstrap is not on the Mobile End, but on the pc: You have these questions, it may be that the front-end engineering experience is insufficient and the Bootstrap understanding is not deep enough.

First, let's look at what you think is "heavy 」. Here is the bootstrap I just downloaded:

bootstrap.js - 68954bootstrap.min.js - 36868bootstrap.min.js.gz - 9781bootstrap.css - 146082bootstrap.min.css - 121260bootstrap.min.css.gz - 19765
Subject ...... If you set the length and width to PX, how can you expect a responsive change ......
Bootstrap provides a mature framework with some basic JavaScript Functions: Alert, Tooltip, and Collapse. In short, it is convenient to use, and the site is also fast.
For Media Query ...... First, it is not a recent rise; second, it is indeed used in Bootstrap3:
CSS · Bootstrap <-- Official Website Introduction

So why is Bootstrap used?
[1] convenience
[2] convenience
[3] Indeed convenient
For details, see here --> official release of Bootstrap3!
In my personal sense, if the subject pursues personalization of styles. If you have a dedicated design team, it's okay. If not ...... I think you will miss Bootstrap

If Bootstrap is not used, is there a substitute?
Here --> Ratchet
Here --> http://purecss.io/
Here --> Foundation | The Most Advanced Responsive Front-end Framework from ZURB
Here --> yaml css Framework
Here --> Skeleton: Responsive CSS Boilerplate On the official website of bootstrap3, mobile terminals are prioritized, but optimized on the basis of the original pc end. Therefore, for mobile terminals only, you can Customize styles (Customize and download · Bootstrap ). ), Or use other frameworks.
If you use rem layout, you don't need bootstrap, especially when customizing styles. I recommend that you learn the commonly used css code, after the extraction, write a simple framework by yourself. I will only use the bootstrap mixin for reference or use it. Others are really not suitable for hard pull. You can see that the real pure mobile terminal large-scale application is, no one uses bootstrap...

If you have to use a framework, use a mobile-only framework. Some of the projects I received include bootstrap, and the results are covered in a wild way. The first ones who started to use do not know how to customize them ????? Bootstrap is a classic responsive framework, but it is not necessarily suitable for your project.
You need to transform it, or combine it with other plug-ins, or even study its source code to write its own framework that is more suitable for mobile terminals.
I think Frozen. js is quite good on mobile terminals. Bootstrap uses a streaming raster response layout, which gives priority to mobile devices and sets different tags for different device raster systems, for example, large devices use lg, medium md, and small xs to achieve responsive layout. Some js components of mobile terminals are too heavy for mobile browsers. In addition, it is recommended that you do not determine the specific width of the mobile phone page. It is best to adjust the viewport to control the page proportion. bs was used when it first came out. It was quite convenient, but I was not interested in it at all, first, there is no need to use all the components (although you can customize and select components, but the feeling is still not streamlined). Second, many people around the world are using this design, so they are tired of it, if you want to redefine the color or change the design based on bs, it is difficult to jump out of that box. I think it is quite appropriate to use bs for technical project documents, but it involves some things that need to be unique and distinctive. If bs is needed, it will be bound, what's more, it's not hard for me to get a responsive page and component for my own Foundation?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.