javascript - Get the PSD image of the art/UI, and then write the order of the front-end page. Please give me guidance.

Question

The psd I got has a resolution of 750*1334, which should be the resolution of iphone6. So, will my chrome simulator be set to iphone6 ​​at this time? If so, then
《Question 1》is coming. The resolution of my computer is 1366*768. If Chrome simulates iPhone 6, it will scale, which will affect the effect of web pages. I usually set it to iPhone 5, so that the mobile page can be displayed without scaling, and the fonts will not be blurred due to scaling. So if you set it to iphone5 to make the psd of iphone6, it will definitely not be exactly the same (the icon size will definitely be smaller than the psd). Later,
"Question 2" I set the font-size of HTML under different resolutions to be different. All css involving length, width, line height use rem units instead of px and em. But in this case, it is also I can only make do with mobile phones of various resolutions, and it cannot be completely the same as psd. So, I was confused again.
"Question 3", for the iPhone psd given by the artist, some pages will mark the element length px, and some will not. Then I am very strange. Should I set the chrome simulator to iphone6 ​​and then do it with the psd? Zero bias at pixel level? As for the pages under the resolution of iPhone5 and iPhone6plus, should I use @media to write them separately? That's so tiring! ! In the past, the PC version could achieve 0 pixel deviation, but the mobile version felt powerless!
《Question 4》Sometimes the PSD received has 5 folders such as drawable-xxhdpi, which are actually icons at different resolutions. I usually use the icon in the largest folder. So, this is Are you lazy? Should it be adapted to mobile phones with different resolutions and @media use icons of different sizes? If so, wouldn’t it be even more overwhelming for me?

--------------------------------Dividing line------------- --------------------------

Actually, after talking for so long, I still don’t know how to make a mobile page. How do you make it? Is there any tutorial or something? Do I really need to adapt to mobile pages at all resolutions? ? I adapted the page under iPhone 5 to be roughly the same. As a result, the artist will ask why the iPhone 6 plus is so different from the psd elements (such as the distance). I am the only one on the front end, and the artist does not understand the front end. I dare not post on Zhihu. Here is the answer. There are hundreds of lines of text at every turn, which is scary. Everyone, please give me some advice.

Answer 1

First: When you say that iPhone 6 will zoom, do you mean that when Chrome is turned into mobile mode for debugging, the bottom layout of iPhone 6 cannot be seen? If so, you can reduce the 100% to 75%, and it will be displayed as a whole without seeing the font clearly. As shown in the picture:

Second: When doing mobile layout, it is recommended to use flexible.js. You can search it on Baidu yourself. This is a plug-in for mobile Taobao. There will be many detailed explanations on the Internet. You can directly introduce this js. When laying out, rem usually refers to 75px. Just set it. The font is set according to data-dpr. Usually three settings need to be set, one when it is 1, one when it is 2, and one when it is 3. Therefore, the font size on the mobile terminal should be kept as consistent as possible. It's best to keep the tags you use consistent, and the workload will be much less.

Third: Personally, I don’t think it’s necessary to have 0 pixel difference, because the workload is really huge. As long as the distance range maintained by each interface is visually the same, so your distance, etc. also need to be rem layout, and the error will not be too big. .

Fourth: I am used to using the largest one. If you don’t mind it or the company needs it, you can media each icon. If there is no need, just choose the largest one, and it will be clear on the big screen. to show.

The mobile layout may encounter many adaptation problems, and the debugging of Chrome may not be accurate. The computer display is normal, and there may be other problems on the mobile phone. However, you can basically find the answer on Baidu or Google. I wish you good luck with your layout.

Answer 2

You can read this article

Answer 3

<script>
    function setRemFontSize() {
        var remSize = window.innerWidth / 7.5;
        document.querySelector("html").style.fontSize = (remSize > 100 ? 100 : remSize) + "px";
    }
    setRemFontSize();
    window.addEventListener("resize", function () {
        setTimeout(function () {
            setRemFontSize();
        }, 200)
    });
</script>

Put this code in the head of your html file to monitor window changes and then mark if it is 750px
Write it as 7.5rem

Answer 4

How to implement mobile shopping: http://www.w3cplus.com/mobile...

Answer 5

I don’t think it is necessary to make it exactly the same as the design drawing. Let’s not talk about the implementation or not. If it is really accurate, how much debugging time will be wasted? Furthermore, is it worth it if the number of images is good? If you have that time, you might as well do something practical. If you are a person who strives for excellence, you can also give it a try.

Second, you said that some of the PSD files given to you by the artist (it is recommended to be called "design" in the future) are not marked, and you don't know how to do it. There are many automatic marking tools on the Internet, such as: Biaoniimei and pxCook.

Third, you said that if you use the simulator in Chrome to set it to iPhone 6, it will be scaled. Can I say that its size can be set?

Answer 6

I just happen to be writing a mobile single-page application recently, and I am also learning. It is recommended to learn some CSS preprocessing methods such as stylus, and then you can define a method, for example
My pictures are XXXX@2x.png, XXXX@3x.png. These two correspond to mobile phones with different dpi
Then I defined a method:

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

Then every time you need to use it

p{
    bg-image:url('xxxx')
}

Then after compilation by the packaging tool, different pictures will be displayed for mobile phones with different dpi.
Maybe it’s not clear. . Because I am also new to stylus

In addition, for debugging, you can try WeChat web developer tools

Answer 7

You need to correspond to pages with different resolutions. The design drawing marks the specific pixels for you. This is a bit weird. The artist must not understand the front-end.

For mobile layout, from personal experience,
1. It is recommended to use percentage for width
2. Height is either automatically expanded or percentage
3. Regarding font size, I think the mainstream recommendation is rem but I prefer vw, use vw no longer needs to make media resolution judgments at all. Some people say that vw is not compatible with some old mobile phones. According to my actual test, the proportion of those that are not compatible with vw is almost negligible in my actual test.

Answer 8

1. Width percentage and fixed size are used depending on the situation, box-sizing: border-box works well.

2. Use media query or rem for fonts. Personally, I basically use media query because it also needs to be adapted to PC.

3. The mobile terminal adaptation is based on the size of iPhone 6. Otherwise, just make sure there are no display problems. Transform can be used to scale certain elements as appropriate.

4. 0 pixel deviation is not necessary, as long as it can achieve the display effect. The page is for users, not for artists.

Answer 9

Basically all are based on iPhone6. It will be fine if it can be displayed on iPhone 4. The view is almost ok. Originally, there is a difference between the view on the computer and the mobile phone. There are differences in the length of the design draft and the actual text