html5 - 前端如何百分百还原美工图?

Question

我是一个入门的前端，最近遇到个困惑。就是做出来的也页面老是被批跟美工图有差距，为什么我照着美工图量的，做出不来和美工图一样的感觉呢？ps我也会，感觉在ps随便改很舒服，为什么html代码就这么难调呢？按美工图尺寸来，看着就是不对。看着对了，尺寸又变了。这是为什么?_?为什么永远量不准的感觉?

Answer 1

Why does the front end need to restore 100% of the artwork?
All products in the world are the result of compromise~
It’s okay if the artist understands web design~If you don’t, it will really kill you~

Use a mature framework~such as Bootsrap
Design according to the way you choose the framework to organize the content~
This is the fastest way

Answer 2

I don’t know how you measured it, so let me briefly explain my thinking.

First of all, if the art drawing is psd, then if you want to avoid errors and get the size, it is best to use psd (unless it is marked...). ps recommends installing the latest cc2015, which is very friendly to front-end cutting ~

After installation, open the design draft for preprocessing: throw the components that need to be cut independently into a group (for easy export), and then trim the edges of the page (to avoid measurement errors caused by things that exceed the design page. This I usually use the crop tool in the toolbar. After selecting it, there will be a drop-down list to set the ratio. Select the width and resolution, and then directly fill in the default width and height of the design draft and write the resolution as 72, and then it will be ok. Regardless of the range, the system will help you automatically convert the things in the cutting area), and then you can start work.

Right-click on each layer/group (that is, the part to be exported independently), select "Export as..." and then select the export format (of course, you can also set the quick export format in the preferences. Then just use "Export as xxx"), and export directly after selecting. You may get stuck at this time because PS is automatically compressing the image. After ok, drag the original image into the design draft and overlap it with the original position. Select the layer to drag in, hold down ctrl, and the size will appear! If you don't want what you want, you can still move the mouse, and PS will switch to display various distance sizes... Needless to say later, right? Just write the positioning yourself.

Finally, I don’t recommend directly copying css. The code that comes out is generally messy and cannot be used directly. It is better to measure it manually and write it down. In addition, the exported things must be dragged in and measured again, because I found that the bounding box of the selection tool on the toolbar is not necessarily the same as the edge of the exported material, so to be on the safe side, I still have to drag it in and measure it to avoid errors... …

This is a mobile phone call. I have to say that the mobile experience of SF is really bad... I rearranged the format on the web page. It doesn’t look too tiring~

Answer 3

Don’t worry, it is possible to achieve high-fidelity restoration, but we have to say that some so-called UI sizes can be made to 14.1px 16.3px. This is not necessary. Even the UI image itself has various misalignments. PS It’s normal for the groups to be all kinds of messy, and then you get entangled in all kinds of things. Many UIs don’t even have basic UI literacy, and they are worse than a graphic artist,

If none of the above conditions exist, you can do the following:
PC side: The style can be reset.css first, and then the font size of the rendering will be whatever size it is. Pay attention to whether the pictures or borders should be made responsive.

Mobile terminal: Same as above, it is recommended to use rem as the font unit. rem is the font setting relative to the root element html, which is not easily affected by inheritance

Summary: Don’t think that the UI diagram is definitely correct. Once you are sure it is reasonable, just follow the above steps and you will be fine

Answer 4

Don’t psds generally come in different sizes? It is usually adapted to the mobile terminal, and the psd is usually 640px. The most annoying thing is that the background has all kinds of sparse dots, which makes me sick when I see it

Answer 5

Communicate in advance if there are any problems. Once the communication is complete, we will work towards 100% restoration. If you encounter problems during the process, communicate with the designer in a timely manner. As for how to restore, I think the main visual gap on the PC side is caused by the compatibility of the IE browser. If you can't restore the design draft under Chrome, I suggest you review the basics. If you want to restore the mobile version, you must consider the size, font, and spacing of the design draft. In short, there are mature solutions. Some of the answers above said that there is no need to restore 100%, and the front-end will not have a big future. They also said that using absolute positioning is too one-sided, and it is impossible to fill the screen with absolute positioning. Don't mislead others.

Answer 6

If scroll bars are allowed to appear on the page, it is still possible to implement it. The width and height are calculated according to the proportion of the design draft,

If you want to be consistent with the design draft and display it on the entire screen, it is impossible, unless the designer also designs design drafts of different sizes according to different devices,

I will shed tears if I talk too much. If your boss is a designer and takes a design draft, he has to produce an identical page on the front end and display it on the whole screen, because the design draft does not have scroll bars. At this time, you Just hit him in the face with the keyboard and mouse

Answer 7

Compatible with IE8 - no? It is possible to make it if compatibility between 6 and 7 is not required

Answer 8

Personally, I feel that it is not necessary to 100% copy the design drawings produced by the UI, especially in terms of size. As long as you fully understand the design intention, you can achieve a visual restoration.

Answer 9

Ahahaha~ I have encountered such an artist before, and he was very arrogant; he just wouldn’t let a single pixel of the image be changed; well, that’s what I did at the time;

Cut out the text in the entire image and use it as the background of the body; all nodes position: relative positioning;

After that... the project passed, and then it was revised again 2 months later;

PS: This guy actually requires the font to be 13PX;

Answer 10

ps can generate some css. Somewhat useful