End mobile promotion speed, good effect, more and more companies, businesses began to pay attention to the construction and production of the mobile station moving pages (h5) of. As more and more games are played for moving pages, requirements for front-end technology will be higher.
Select the appropriate layout, the first step is to write mobile page. Today we'll talk about the layout of the problem of mobile terminals.
Why mobile terminal layout so confusing? This is caused by the multi-party cause.
- css this technology system itself is very confusing, basically you can say there is no law at all, depending on the level of skilled workers rather than logic some more;
2. After the upgrade css multiple times, after each upgrade, the old and the new technical standards essentially no association. For example: table layout, div + css layout, flex layout, grid layout; - Confusion handset market. The current market size of mobile phones varied; plus the retina caused by the technology of iphone dpr confusion;
understanding of some basic concepts of mobile devices.
One. Physical device pixels.
Question: Why flashlight can emit light of one color, and our screens emit light so many colors?
Because our screen is composed of numerous small flashlight, each of which points can be made different colors of light, Finally, we see on the formation of a color effect.
Each image is a color dots, each color dot is called a pixel. A picture from the 300,000 color dots, this image pixel is 30W. We often say that the camera is the number of pixels, the pixels of the camera is actually saying that this sense of how many devices have a 100W light-sensitive device camera is 100W pixels camera with a light-sensitive device 4000W 4000W pixel camera is a way analogy. Photos taken by a camera 100W pixels wash into the 5-inch 6-inch photos will clear a little more than wash into.
two. Screen resolution
Screen resolution is the number of pixels per line screen * number of pixels of each column, and each screen has its own resolution. The higher the screen resolution, the more colors presented, the higher the clarity.
in conclusion: - The unit pixels are essentially: the number, the pixel 100 can be understood as you you have 100 flashlight;
- Same size (such as 1cm 1cm rectangular size), the more the inside of the pixel, the sharper the picture;
III. css pixel
corresponds to one physical device pixel pc side 1css pixels.
Thoughts:
Our phone resolution is 640 1136 (the iPhone 5, and iphone 5s physical device resolution), if we open a website purely pc end what happens?
(Such as jumei.com, min-width is 1090px, in pc my computer device width of the end of 1280, detected by screen.width)
we find that the site will be reduced to, we can see the whole site (www.jubi.com)
will be found, there is a scroll bar, because the ban scaled
four. DPR
1 Ge css how many pixels make up the physical device pixels
thinking: iphone 5 iphone 5s or a screen to see the limits of how much width?
should be 320 (which is the default css width of the visible area) * 2 = 640px
above, we finished learning all about the concept of a mobile terminal related to the layout, then, let's chat with the idea of the layout.
If we have a design draft of 640px, how can we allow users to see all of it?
Line of thinking: Percentage distribution
to size by 2, such as the amount we are out of 640px ---> In fact, we only write 320px;
if the iphone iphone 6 6 how to do width is 375px;?
Because the width 320 and 375 is actually not very different, we can variable width, the overall width is set to 100%, then the other out of the entire amount is how much.
Layout method- After we get a designer to design draft (recommended 640px), all divided by the amount of out of size 2 to
- Aliquots encountered on a percentage
- Floating Floating left + right (to achieve navigation portion, navigation portion recommended discount) -> suitable for all the elements fixed width
- + Padding pressing left floating (see section recommended contents of discounts) are essentially the same element size in any dimension below, in fact, change the size of the spacing between elements and element -> element for a fixed width, the width of the other adaptive;
examples of sites
- http://m.duba.com/
- http://m.lagou.com/
shortcomings percentage layout
displayed in the large-screen phone will become the effect of some elements on the page width is pulled long, but highly original and still the same, the actual display is very inconsistent, this is the most fatal flaw flow layout, often only see a few under-sized mobile phone effect is satisfactory, in fact, many visual designers We should not accept such an effect, because their design seen in the big-screen mobile phone is stretched horizontally effect equivalent to the same. Fluid layout is not the best way to achieve, through a large percentage of the layout, there will be a lot of compatibility issues often, there is a lot of restrictions on the design, because they need to be considered early in the design flow layout element the impact can only be transversely stretched layout design elements, there are many limitations when designing.
Thinking two: rem layout
how to understand rem layout?
Think about a problem, if we draft design is 750px, we amount out of a width of the box is 75px, then 640px below, it should be the number of suitable The answer is:? 64
question, if in order to ensure you write the size css only need to write once, do not change in different screen sizes below?
If we 750px below, we let the html font-size 75, the width of the box is 1rem, in 640px let's make html font-size of 64, the width of this box is 1rem, so the problem is solved.
Then the actual development, such as what kind of layout ideas that use?
We open m.jd.com, m.vip.com, will find, in fact, do not have a website with a mere percentage or rem layout, often found mixed with various layout ideas, because ideas can not have a common layout to ensure no question
why the rem is not a panacea?
such as 1px, if we will become very thick in the case of dpr 2, we knew that was not true pixel.
Recommended layout ideas - used by Ali produced lib-flexible library.
URL: https://github.com/amfe/lib-flexible ;
how to use it?
- With the introduction of the layout of flexible.js to note is not to write meta: viewport label, because flexible.js will automatically help you create;
- Introduced base.css;
- Issued to the designer to take over denoted by reference draft draft font size = width denoted by / 10, denoted as a width of 750 issued denoted by reference draft font size 75; denoted issued width 640 denoted by reference draft font size is 64;
- In addition to font size, all are by rem to the other, such as your design draft is 750px, then, if you measured out is 75px, it is 1rem;
except font to be different sizes depending on the dpr settings, such as If the design draft is 750, then the next if the font is 24px, then dpr case 1 is 16px, dpr2 situation is 24px, the case dpr3 is 32px (this involves the font of expertise, in a nutshell is no one would consider odd fonts, https://www.zhihu.com/question/20440679, we can not let tools help us to automatically count, have to write the dead .
These are my personal summary of some of the mobile terminal layout. if not proper place, please correct me.
Finally, attach the end to move about frequently asked questions when website:
- http://www.cnblogs.com/PeunZhang/p/3407453.html
- https://github.com/zhiqiang21/blog/ BLOB / Master / README.md
- https://github.com/sunmaobin/Mars/tree/master/issues
- http://www.cnblogs.com/PeunZhang/p/4517864.html
- HTTP: // the WWW. cnblogs.com/PeunZhang/p/4903710.html
- http://www.cnblogs.com/PeunZhang/p/4633255.html
- http://www.cnblogs.com/PeunZhang/p/3835717.html
- http://www.cnblogs.com/PeunZhang/p/3592096.html