PerfectPixel გაფართოება WellDoneCode-ის მიერ. Pixel Perfect PerfectPixel-ის გაცნობა Google Chrome-ისთვის

შუადღე მშვიდობისა მეგობრებო. მეორე დღეს დიმა შულეშოვი დამიკავშირდა და შემომთავაზა თემა საინტერესო სტატიისთვის (დიმა, გამარჯობა!). ისე, ჩემთვის საინტერესო და აქტუალურია, იმედია თქვენთვისაც გამოგადგებათ, ვინმესთვის. ეს არის კოდის რამდენიმე ხაზი, რომელიც დაგეხმარებათ თქვენი სადესანტო გვერდის ზუსტად განლაგებაში.

გარდა ამისა, თქვენ მნიშვნელოვნად შეამცირებთ დისტანციების გაზომვასა და Photoshop-ს, ბრაუზერის ფანჯარასა და ტექსტურ რედაქტორს შორის გადართვის დროს.

დასრულებული შედეგი ემყარება იმ ფაქტს, რომ თქვენ გაქვთ ღილაკი თქვენს პროექტში, რომელიც დაფიქსირდა ზედა მარცხენა კუთხეში (ნებისმიერ ადგილას), როდესაც დააწკაპუნებთ მასზე, განლაგება (სურათი) გარკვეული გამჭვირვალობით არის გადატანილი თქვენს განლაგებაზე, და შეგიძლიათ შეაფასოთ რამდენად ზუსტია თქვენი ჩაღრმავები, ზომები, პოზიციონირება დიზაინს. გასაგებად, თქვენ უნდა სცადოთ. გირჩევთ ჩამოტვირთოთ წყარო და ნახოთ როგორ მუშაობს იგი, ან დაუკარით ეს მოკლე ვიდეო:

ასე რომ, თუ გქონდათ პრობლემები ზედმიწევნით მომხმარებლებთან, რომლებიც ამოწმებენ ყველა პიქსელს, მაშინ ახლა ასეთი პრობლემა აღარ უნდა წარმოიშვას. მოდით საბოლოოდ გავაცნობიეროთ ეს ეფექტი.

უპირველეს ყოვლისა, როგორც ხშირად ხდება, ჩვენ ვუკავშირდებით jQuery ბიბლიოთეკას:

ვინაიდან უმეტეს პროექტებში ის უკვე დაკავშირებულია, დარწმუნდით, რომ ეს აღარ გაიმეოროთ. ამან შეიძლება გამოიწვიოს კონფლიქტი და დიდი დრო დაგჭირდებათ იმის გასარკვევად, თუ რატომ წარმოიქმნება ის.

ახლა, მოდით დავამატოთ რამდენიმე ტეგი ჩვენი პროექტის შიგნით. ჩემთვის ასე გამოიყურება:

Pixel Perfect

სადაც პირველი div არის ბლოკი, რომელიც პასუხისმგებელია ღილაკზე, ხოლო მეორე არის ჩვენი განლაგების გადაფარვა. იმისათვის, რომ ის სწორად იქნას გამოყენებული, თქვენ უნდა გააკეთოთ რამდენიმე მარტივი პარამეტრი:

P ( ფონი: url(../images/maket.jpg) გამეორების გარეშე; /* თქვენი განლაგება */ სიგანე: 1255 პიქსელი;/* განლაგების სიგანე */ სიმაღლე: 750 პიქსელი;/* განლაგების სიმაღლე */ მარცხნივ: calc(50 % - 627.5px);/* მეორე მნიშვნელობა - განლაგების სიგანის ნახევარი*/ პოზიცია: აბსოლუტური; ზედა: 0; გამჭვირვალობა: 0.4 !მნიშვნელოვანი; გარდამავალი: .3s; z-ინდექსი: 97; )

აქ არის 4 პარამეტრი, რომელსაც ახლავს კომენტარი და უნდა შეიცვალოს თქვენით. ყველაფერი მარტივია!

ახლა მოდით ღილაკის სტილი. თუ გარეგნობა თქვენთვის მნიშვნელოვანია, მაშინ შეცვალეთ, წინააღმდეგ შემთხვევაში შეგიძლიათ დატოვოთ ის, როგორც არის.

#p (პოზიცია: ფიქსირებული; მარცხნივ; ზევით: 0; სიგანე: 200 პიქსელი; სიმაღლე: 75 პიქსელი; ფონი: #c36c2c; z-ინდექსი: 99; კურსორი: მაჩვენებელი; ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 25 პიქსელი; ხაზის სიმაღლე: 0 პიქსელი; ფერი: #c36c2c; მარცხნივ: -150 პიქსელი; ვერტიკალური გასწორება: შუა; შრიფტის წონა: 700; გარდამავალი: .3 წმ.) #p:hover (მარცხნივ: 0; ხაზის სიმაღლე: 80 პიქსელი; ფონი: #88d3c2;)

კარგი, რჩება მხოლოდ ღილაკზე დაწკაპუნებით რეაქციის დამატება. ჩვენ უბრალოდ დავამატებთ/ამოშლით კლასს და შევცვლით ბლოკის გამჭვირვალობას ფონზე განლაგებით:

$(დოკუმენტი).ready(function () ($("#p").click(function () ($("#pp").toggleClass("p") ));));

დანამატებისა და სკრიპტების მიმოხილვა Pixel Perfect ტექნიკით მუშაობისთვის.

პირველ რიგში, რა არის Pixel Perfect ტექნიკა? ყველაფერი მარტივია და შეგიძლიათ სახელით გამოიცნოთ - ეს არის განლაგების ტექნიკა, რომელშიც HTML შაბლონის განლაგება ზუსტად ემთხვევა (pixel-for-pixel) ორიგინალურ PSD განლაგებას.

სხვა სიტყვებით რომ ვთქვათ, თუ შემუშავებული HTML შაბლონის „სურათს“ გადაანაწილებთ ორიგინალური PSD განლაგების სურათზე, მაშინ ორივე სურათი უნდა ემთხვეოდეს. ნახატების ყველა ელემენტი უნდა იყოს შერწყმული - ტექსტი, სურათები, გრაფიკული ელემენტები.

განლაგების თანამედროვე მოთხოვნების მიხედვით, Pixel Perfect თითქმის დე ფაქტო სტანდარტია. ამიტომ სასიცოცხლოდ მნიშვნელოვანია ამ საკითხის შესწავლა, თუ გაქვთ სურვილი და სურვილი გყავდეთ ბევრი შეკვეთა და მომხმარებელი.

წერის დროს Pixel Perfect ტექნიკა ხორციელდება ბრაუზერის შესაბამისი დანამატების ან სპეციალიზებული სკრიპტების გამოყენებით. ორი დანამატი და ორი სკრიპტი მოკლედ იქნება განხილული ქვემოთ, მაგრამ ყველა შემთხვევაში Pixel Perfect-ის ტესტირების ნაბიჯები იგივეა.

თავდაპირველად, Photoshop-ში, ორიგინალური PSD განლაგება ინახება როგორც გამოსახულება ფორმატში

1

.png

. შემდეგ ბრაუზერში იხსნება ამ განლაგების საფუძველზე HTML შაბლონი. მოდულის გამოყენებით, განლაგების PNG ასლი განლაგებულია განლაგების გვერდზე. და HTML გვერდზე და PNG ასლზე ელემენტების მოწყობის განსხვავება ხილული ხდება.

ეს არის მთელი მარტივი Pixel Perfect პროცედურა გვერდის განლაგების შესამოწმებლად. სადაც გვერდის ელემენტები არ ემთხვევა ორიგინალს, სტილის ფაილებში მნიშვნელობები შესწორებულია.

Pixel Perfect Firefox-ისთვის

Firefox ბრაუზერისთვის არის Pixel Perfect მოდული ამავე სახელწოდების გვერდის განლაგების შესამოწმებლად.

Pixel Perfect მოდულის დაყენების შემდეგ, მისი ხატულა გამოჩნდება Firefox ბრაუზერის ხელსაწყოთა ზოლში. აღსანიშნავია, რომ Pixel Perfect მოდული მხარს უჭერს მხოლოდ Firefox ბრაუზერის უახლეს ვერსიებს(მაგალითად, v.31 ვერსიაში ეს დანამატი არ იმუშავებს).

ახლა თქვენ უნდა გახსნათ ორიგინალური PSD განლაგება Photoshop-ში და შეინახოთ იგი მთლიანად გამოსახულების სახით ფორმატში

1

.png

"Save for Web..." მეშვეობით.

Მნიშვნელოვანი! PNG სურათზე ექსპორტამდე, PSD განლაგება უნდა მიიყვანოთ თავდაპირველ ზომამდე! ამ მიზნით Photoshop-ს აქვს რეზერვირებული ცხელი კლავიშების კომბინაცია: Ctrl+1 - Windows\Linux-ისთვის, Cmd+1 - Mac OS X-ისთვის.

როგორც კი მომზადდება და შეინახება PSD განლაგების PNG ასლი, გახსენით HTML გვერდი ამ განლაგების საფუძველზე Firefox ბრაუზერის ფანჯარაში.

გაუშვით Pixel Perfect მოდული ბრაუზერის ხელსაწყოთა ზოლში მის ხატზე დაწკაპუნებით. მაშინვე გამოჩნდება მოდულის ფანჯარა, რომელშიც ის მოგვთხოვს ავირჩიოთ წინასწარ მომზადებული PNG სურათი (PSD განლაგების ასლი):

დააჭირეთ ღილაკს "ფენის დამატება", აირჩიეთ მომზადებული PNG სურათი და მიიღეთ შედეგი - ორი ფენის გადაფარვა (დაპროექტებული და ორიგინალური):

ჩვენ ვხედავთ, როგორ არ ემთხვევა HTML გვერდის ტექსტი და ღილაკი PNG ორიგინალს. ამიტომ, გახსენით სტილის ჩანართი Firebug-ში (ეს მოდული ავტომატურად გააქტიურდება Pixel Perfect მოდულის გაშვებისას) და დაიწყეთ რედაქტირება/მორგება:

ყურადღება მიაქციეთ Pixel Perfect მოდულის „ინვერტაციის“ რეჟიმს - მისი საშუალებით შეგიძლიათ ძალიან ზუსტად დაარეგულიროთ HTML გვერდის ელემენტები.

ზემოთ აღწერილი პროცესი მოიცავს Pixel Perfect დანამატთან მუშაობას, ისევე როგორც Pixel Perfect განლაგებას, როგორც ასეთი. ყველაფერი უკიდურესად მარტივია.

ქვემოთ მოცემულია ვიდეო, რომელიც აჩვენებს Pixel Perfect დანამატთან მუშაობის პროცესს (ვიდეო არ არის ჩემი, ამიტომ მე არ ვარ პასუხისმგებელი ხარისხზე ყველა გაგებით) - სამუშაოს სიცხადისთვის ის წავა:

Firefox ბრაუზერისთვის Pixel Perfect მოდულის მიმოხილვა დასრულდა.

PerfectPixel Google Chrome-ისთვის

შესამოწმებელ გვერდზე დასაკავშირებლად, თქვენ უნდა დაწეროთ ხაზების ძირითადი ნაკრები:

$ (ფუნქცია () ( $ . pixlayout ( "/path_to_picture/picture.ext"); ));

თქვენ შეგიძლიათ შეავსოთ ძირითადი ნაკრები სკრიპტში პარამეტრების მითითებით ( აღებულია ოფიციალური საიტიდან):

$ (ფუნქცია ()( $ . pixlayout (( src : "/img/layout.jpg" , გამჭვირვალობა : 0.8 , ზედა : 50 , ცენტრი : true , კლიპი : true , ჩვენება : true ), " .wrapper" ); ) ); სწრაფი მითითება pixLayout სკრიპტის გამოყენების შესახებ

სწრაფი მითითება pixLayout სკრიპტის გამოყენების შესახებ მოცემულია ქვემოთ მოცემულ ორ აბზაცში ( ასევე აღებულია ოფიციალური საიტიდან):

მოძრავი

• ღილაკები: "მარცხნივ", "მარჯვნივ", "ზემოთ", "ქვემოთ"
• ღილაკები: W , A , S , D როცა სურათი ჩანს
• ნავიგაციის ზოლის ღილაკები

Ოპერაციები

• გაანადგურე ( ამოიღეთ pixLayout-ის ყველა html და css კოდი გვერდიდან) - ჯვარი პანელის ზედა მარჯვენა კუთხეში;
• პანელის ჩამაგრება - ხატულა პანელის ზედა მარჯვენა კუთხეში;
• სწრაფი მითითება - კითხვის ნიშანი პანელის ზედა მარჯვენა კუთხეში;
• კოლაფსის პარამეტრები - პანელის ბოლოში „ზემო“ ისარი;
• სურათის ჩვენება/დამალვა - ნავიგაციის პანელის ცენტრალური ღილაკი ან Shift + E.

ქვემოთ მოცემულია ოფიციალური ვიდეო, სადაც ნაჩვენებია, თუ როგორ უნდა იმუშაოთ pixLayout სკრიპტთან:

დასკვნა

ამ მოკლე მიმოხილვაში ჩვენ გავეცანით ოთხ ინსტრუმენტს პიქსელის სრულყოფილი განლაგებისთვის. ორი მათგანი უფასო ბრაუზერის დანამატია. დანარჩენი ორი არის JavaScript სკრიპტები HTML გვერდზე დასაკავშირებლად.

რა უნდა აირჩიოთ თქვენი სამუშაოსთვის, ყველას გადასაწყვეტია.

ბრაუზერის დანამატების საუკეთესო რამ არის ის, რომ ისინი უფასოა, მარტივი ინსტალაცია და მარტივი გამოსაყენებელი.

X-Precise სკრიპტის მინუსი არის ის, რომ იგი ფასიანია ($5), საჭიროებს კავშირს HTML გვერდზე შესამოწმებლად და დამოკიდებულია jQuery ბიბლიოთეკაზე. pixLayout-ის ნაკლოვანებაზე ასევე შეიძლება ითქვას, რომ იმისთვის, რომ ის იმუშაოს, საჭიროა დამატებითი „აურზაური“ HTML გვერდზე დაკავშირებასთან დაკავშირებით.

თუმცა, ორივე სკრიპტის უპირატესობა არის უდავო ფაქტი, რომ ეს არის ბრაუზერის გადაწყვეტა, აბსოლუტურად დამოუკიდებელი ნებისმიერი ბრაუზერისგან (Firefox, Chrome, Opera, Safari) ან კონკრეტული ბრაუზერის ვერსიისგან. სკრიპტები ყველა შემთხვევაში ერთნაირად იმუშავებს.

PerfectPixel გაფართოება Google Chrome-ისთვის ეხმარება განლაგების დიზაინერებს და ვებ დეველოპერებს შექმნან ვებსაიტების განლაგება, რომლებიც საუკეთესოდ ემთხვევა მომხმარებლის მიერ დამტკიცებულ დიზაინს.

თქვენ ხსნით გვერდს, რომელსაც ამუშავებთ Chrome-ში, გაუშვით PerfectPixel, ამატებთ ახალ ფენას - ამოცანის სურათს და ახლა შეგიძლიათ რეალურ დროში გადააფაროთ სურათი შედეგს, შეადაროთ და გამოასწოროთ დეფექტები. თქვენ შეგიძლიათ ნახოთ, თუ როგორ მუშაობს გაფართოება ამ ვიდეოს ყურებით:

თითო გვერდზე მრავალი ფენა მხარდაჭერილია და ფენების ნაკრები განსხვავებულია სხვადასხვა დომენისთვის. დამატებული ფენები და მათი ატრიბუტები შეინახება თუ დახურავთ ბრაუზერს და გამორთავთ კომპიუტერს.

დეველოპერის მოხერხებულობისთვის არის ჩაკეტვის ფუნქცია - როდესაც გააქტიურებულია, შეგიძლიათ ურთიერთქმედება გვერდის ელემენტებთან, რომლებიც განლაგებულია აქტიური ფენის ქვეშ. თქვენ ასევე შეგიძლიათ შეცვალოთ ფენის გამჭვირვალობა, მიანიჭოთ მას მკაფიო კოორდინატები, შეცვალოთ მასშტაბი (გამოდგება ბადურის სურათების შესამოწმებლად).

მათთვის, ვისაც სურს ინსტრუმენტთან რაც შეიძლება ეფექტურად იმუშაოს, მხარდაჭერილია ცხელი კლავიშები და მაუსის მუშაობის რეჟიმები, რომელთა სრული სია ხელმისაწვდომია პროექტის ოფიციალურ ვებსაიტზე: www.welldonecode.com/perfectpixel/shortcuts.

მართვის პანელის შემცირება შესაძლებელია ეკრანის მარჯვენა კიდეზე სათაურზე ორჯერ დაწკაპუნებით. მინი რეჟიმი გამოსადეგია საპასუხო დიზაინის ტესტირებისას მცირე ეკრანის ზომებზე.

გაფართოება რეგულარულად განახლდება, ემატება ახალი ფუნქციები და ცხელი კლავიშები და გამოსწორებულია შეცდომები. ჩვენ მივესალმებით ნებისმიერ კომენტარს და წინადადებას, გთხოვთ მოგვწეროთ ელექტრონული ფოსტით: [ელფოსტა დაცულია]. უახლოეს მომავალში იგეგმება ვერსიების გამოშვება სხვა ბრაუზერებისთვის: Firefox, Safari, IE და ფენების და პარამეტრების სინქრონიზაცია ღრუბლის საშუალებით. გამოიწერეთ ბიულეტენი, რომ იყოთ ინფორმირებული ახალი ფუნქციონირების გამოშვების თარიღების შესახებ ოფიციალურ ვებსაიტზე: www.welldonecode.com/perfextpixel.

სიამოვნებით ვუპასუხებ თქვენს კითხვებს აქ კომენტარებში ან ელექტრონული ფოსტით.

მოხარული ვარ, რომ გაგიცანით Chrome.RF საზოგადოებაში!

13/01/2017

შორიდან დავიწყებ. არც ისე დიდი ხნის წინ შევუერთდი HTML აკადემიას, როგორც მენტორი. გარდა იმისა, რომ მენტორინგი ხელს უწყობს თქვენი ცოდნის ორგანიზებას, ის საოცრად ასტიმულირებს სხვადასხვა სასარგებლო ნივთების განვითარებას, რადგან ამ პროცესში ჩნდება საინტერესო ამოცანები, რომელთა გადაწყვეტა შეიძლება მოხერხებულად ავტომატიზირებული იყოს.

სტუდენტები იღებენ სამ გვერდიან სასწავლო დიზაინს, თითოეულს აქვს განლაგება სამი მდგომარეობისთვის: მობილური, ტაბლეტი და დესკტოპი - სულ ცხრა განლაგება. ადაპტაციური გვერდის განლაგების პროცესში, აზრი აქვს პერიოდულად შეცვალოთ ფანჯრის ზომა და შეამოწმოთ, რომ დესკტოპის ვერსიისთვის სტილის დამატებისას, მაგალითად, მობილური არ დაირღვა. რა არის საუკეთესო გზა განლაგების შესაბამისობის შესამოწმებლად?

სკრინშოტები, რომლებიც გამოიყენება დიდ პროექტებში, ძალიან მძიმეა ასეთი ამოცანისთვის, ჩვენ გვჭირდება რაღაც ძალიან მარტივი, რათა ნებისმიერმა დამწყებმა შეძლოს მისი გამოყენება.

პირველი, რაც გავიფიქრე, რა თქმა უნდა, იყო Pixel Perfect მოდული (ყოველ შემთხვევაში, ის ხელმისაწვდომია Chrome-ისთვის და Firefox-ისთვის), მაგრამ ის არ არის შესაფერისი მრავალი მიზეზის გამო. მაგალითად, დატვირთული განლაგება არ შეიძლება შეიცვალოს გვერდებს შორის გადართვისას და ბრაუზერის ფანჯრის შეცვლისას და მათი ხელით გადართვა ყოველ ჯერზე სწრაფად მოსაწყენი გახდება. უფრო მეტიც, არსებობს მედია გამონათქვამები, რომლებსაც შეუძლიათ იდეალურად შეცვალონ განლაგება ჩვენთვის.

ჩემი პირველი გამოსავალი ასე გამოიყურებოდა:

BODY ( ფონის გამეორება: არ განმეორდეს; ფონის პოზიცია: 50% 0; ფონის სურათი: url ("img/index-mobile.png"); ) @media (წთ. სიგანე: 768 პიქსელი) ( BODY (ფონი- სურათი: url("img/index-tablet.png"); ) ) @media (წთ-სიგანე: 1024 პიქსელი) ( BODY (ფონ-სურათი: url("img/index-desktop.png"); ) )

ეს კოდი ჩასმულია ყველა გვერდზე. ის ადგენს აუცილებელ მედია გამონათქვამებს და სურათების ბმულები იცვლება თითოეული კონკრეტული გვერდის მიმდინარე განლაგებებზე.

განლაგება იცვლება გვერდებს შორის გადართვისას და ფანჯრის ზომის შეცვლისას, ამის გამოყენება უკვე შესაძლებელია და საკმაოდ მოსახერხებელია. განლაგება დევს პირდაპირ მარკირების ქვეშ; თქვენ არ გჭირდებათ მუდმივად წასვლა გრაფიკულ რედაქტორთან მათი მისაღებად, ასე რომ, ასეთი მარტივი დიზაინიც კი მნიშვნელოვნად დაზოგავს დროს.

მაგრამ როდესაც სტილები იწერება, გვერდი ჩნდება საკუთარი ფონითა და სურათებით, ხოლო ქვედა ფენის განლაგება უხილავი ხდება. Რა უნდა გავაკეთო?

ჩემი შემდეგი გამოსავალი იყო Chrome გაფართოება, რომელიც ქმნის გამჭვირვალე ფენას განლაგებით თითოეულ გვერდზე. ფანჯრის ზომის შეცვლისას, განლაგება იცვლება მედია გამონათქვამების გამოყენებით, როგორც წინა შემთხვევაში. ბონუსად, ჩვენ დავამატეთ კონტროლი განლაგების ფენის გამჭვირვალობაზე და განსხვავებების შერწყმის რეჟიმის ჩართვის შესაძლებლობა, რათა გაადვილდეს განსხვავებების პოვნა.

მშვენიერი რამ აღმოჩნდა. მაგრამ ის მუშაობს მხოლოდ Chrome-ში, განლაგებისა და ბილიკების სურათებზე გადართვის ძირითადი პუნქტები უნდა იყოს მითითებული თავად გაფართოების კონფიგურაციაში, განლაგების სურათები უნდა იყოს გაფართოების შიგნით და იყო ყველანაირი სხვა შეზღუდვა. ზოგადად, ეს არ არის უნივერსალური, ყოველი ახალი პროექტი მოითხოვს ხელით კონფიგურაციას და ეს საერთოდ არ არის შესაფერისი დამწყებთათვის.

მინდოდა მეპოვა რაღაც ძალიან, ძალიან მარტივი გამოსავალი, რათა ნებისმიერს შეეძლოს გაუმკლავდეს დაყენებას და ინსტალაციას და ამავდროულად, უხეშად მაინც გაეგო რას აკეთებდა.

მარკირების განლაგებასთან შესადარებლად, საჭიროა ორი ფენა: ფენა მარკირებით და ფენა განლაგებით. ერთის მხრივ, თქვენ შეგიძლიათ ხელით ჩასვათ ფენა განლაგებით გვერდის განლაგებაში, მეორე მხრივ, არსებობს მისი დავიწყების მაღალი რისკი, როდესაც ის აღარ არის საჭირო, ამიტომ შემდეგი ვარიანტი იყო არსებული გვერდის ელემენტების გამოყენება, როგორც ფენები.

თუ განლაგებას ფონად დააყენებთ, როცა გამჭვირვალობას შეცვლით, განლაგებაც გამჭვირვალე გახდება, ამიტომ ჯობია ელემენტი გამოვიყენოთ ფენად განლაგებით:

HTML ( ფონის გამეორება: არ განმეორდეს; ფონის პოზიცია: 50% 0; ფონის სურათი: url ("img/index-mobile.png"); ) @media (მინ. სიგანე: 768 პიქსელი) (HTML (ფონი- სურათი: url("img/index-tablet.png"); ) ) @media (წთ. სიგანე: 1024 პიქსელი) (HTML (ფონის სურათი: url("img/index-desktop.png"); ) )

როგორც წინა შემთხვევაში, განლაგება იქნება მარკირების ქვეშ, მაგრამ ახლა, თუ ფონი მითითებულია, ისინი არ გამოჩნდება. მოდით გავხადოთ მარკირების ფენა ნახევრად გამჭვირვალე, გამჭვირვალობის დამატებით:

/* გამოყენება განლაგების ფენად */ HTML ( ფონის გამეორება: არ განმეორდეს; ფონის პოზიცია: 50% 0; ფონის სურათი: url ("img/index-mobile.png"); ) @media (მინ- სიგანე: 768 პიქსელი) ( HTML ( ფონის სურათი: url ("img/index-tablet.png"); ) ) @media (მინ-სიგანე: 1024 პიქს) ( HTML (ფონის სურათი: url("img/index-desktop .png"); ) ) /* მარკირების ფენა ნახევრად გამჭვირვალე გახადეთ */ BODY (გაუმჭვირვალობა: .5;)

ეს ასევე შეიძლება გამოყენებულ იქნას როგორღაც, მაგრამ ამ გადაწყვეტას არ ჰქონდა მოსახერხებელი გამჭვირვალობის კონტროლი, ამიტომ დავწერე პატარა სკრიპტი, რომელიც ამატებს მსგავს პანელს გვერდზე:

ის საშუალებას გაძლევთ გააკონტროლოთ გამჭვირვალობა (ამ შემთხვევაში, განლაგების ნაცვლად უბრალოდ ზოლიანი ფონია), ის შეიძლება გადაიტანოთ გვერდზე და შეიძლება გამორთოთ, თუ საჭირო არ არის.

მე გადავწყვიტე არ გამეკეთებინა ბრაუზერის გაფართოება, რათა არ შემეზღუდა ბრაუზერების რაოდენობა, რომლებშიც მისი გამოყენება შეიძლება.

ინსტალაცია მთავრდება ასე:

დააინსტალირეთ პაკეტი თქვენი პროექტის საქაღალდეში npm მეშვეობით: npm i pixel-glass --save-dev

განათავსეთ სურათები განლაგებით თქვენს პროექტში img საქაღალდეში (ან სხვა საქაღალდეში სურათებით პროექტის შიგნით).

ჩადეთ შემდეგი კოდი თქვენს გვერდებზე: HTML ( background-repeat: no-repeat; background-position: 50% 0; /* ნაგულისხმევი მობილური განლაგება */ background-image: url("img/index-mobile.png"); ) /* ტაბლეტი */ @media (წთ. სიგანე: 760 პიქსელი) ( HTML ( /* ტაბლეტის განლაგება */ ფონის სურათი: url("img/index-tablet.png"); ) ) /* სამუშაო მაგიდა */ @media (მინ-სიგანე: 960 პიქსელი) ( HTML ( /* დესკტოპის განლაგება */ ფონური სურათი: url("img/index-desktop.png"); ) ) BODY (გაუმჭვირვალობა: .5; ) დაარედაქტირეთ იგი თქვენი პროექტის შესაფერისად: დააყენეთ მედია გამონათქვამები, შეცვალეთ სურათების მისამართები სამუშაოზე.

განაახლეთ გვერდი და ისიამოვნეთ.

ჩემი აზრით, ეს საკმაოდ მოსახერხებელი ინსტრუმენტი აღმოჩნდა, მაგრამ რაღაცის გაუმჯობესება ნამდვილად შეიძლებოდა. თუ თქვენ გაქვთ რაიმე იდეა ამ საკითხთან დაკავშირებით, მომწერეთ კომენტარებში. ასევე დამაინტერესებს როგორ წყვეტთ ასეთ პრობლემებს და რა ინსტრუმენტებს იყენებთ ამისთვის.

UPD: ბიბლიოთეკა გადავიდა npm-ზე, მადლობა ყველა მონაწილეს

თუ ახლახან იწყებთ კომპიუტერის დაუფლებას და იყენებთ სხვადასხვა პროგრამულ უზრუნველყოფას და გჭირდებათ პროგრამა სურათების სანახავად, ჩამოტვირთეთ Pixel Perfect. ეს მაყურებელი ისე მარტივად არის დანერგილი, რომ გამოუცდელ მომხმარებელსაც კი შეუძლია ადვილად დაეუფლოს მას, იმისდა მიუხედავად, რომ დეველოპერებს არ სურდათ ფიქრი რუსულენოვანი მომხმარებლებისთვის პროდუქტის ლოკალიზაციაზე (და ზოგადად მიატოვეს თავიანთი აზროვნება ათი წლის წინ).

ინტერფეისის შესახებ

როგორც უკვე აღვნიშნეთ, Pixel Perfect-ს საკმაოდ მწირი ფუნქციონირება აქვს. ეს შეიძლება ძალიან შეზღუდული ჩანდეს იმ მომხმარებლებისთვის, რომლებიც მიჩვეულნი არიან მრავალფუნქციური მნახველებისთვის, რომლებსაც შეუძლიათ არა მხოლოდ ფოტოების და სურათების ჩვენება, არამედ მათი რედაქტირება, დაბეჭდვა ან თუნდაც ონლაინ გამოქვეყნება. ამიტომ, თუ ბევრი ფუნქცია გჭირდებათ, გირჩევთ, გვერდის ავლით ამ პროგრამულ უზრუნველყოფას ანალოგის პოვნა, მაგალითად -.

Pixel Perfect საშუალებას გაძლევთ გახსნათ და ნახოთ სურათები JPEG, PNG, GIF და BMP ფორმატებში. ამასთან, პროგრამას არ უჭერს მხარს ერთი სურათიდან მეორეზე გადაადგილებას და იმის გამო, რომ არ არის ღილაკი „მობრუნება“, თითოეული სურათი ცალკე უნდა გაიხსნას. ფაილის გახსნისას მაყურებელი ეკრანის ბოლოში აჩვენებს ყველა ტექნიკურ ინფორმაციას ობიექტის შესახებ, რაც საკმაოდ მოსახერხებელია. ნახვისას მომხმარებლებს შეუძლიათ სურათის ცენტრში და გაჭიმვა.

მუშაობის მახასიათებლები

Pixel Perfect ნაწილდება პორტატულ ფორმატში, რაც კიდევ უფრო ამარტივებს მომხმარებლის გამოცდილებას. არ არის საჭირო ინსტალაციაზე ფიქრი, უბრალოდ გახსენით გადმოწერილი არქივი და გაუშვით შესრულებადი ფაილი. მაყურებელი განსაზღვრავს არაარსებით მოთხოვნებს კომპიუტერის აპარატურისთვის და მასზე დაინსტალირებული Windows-ის ვერსიისთვის.

შედეგები

• რუსიფიცირებული ინტერფეისის ნაკლებობა;
• ნაწილდება პორტატულ ფორმატში;
• პროგრამის ინსტრუმენტები ეფუძნება ერთი ფუნქციის შესრულებას - გრაფიკული ფაილების ჩვენებას;
• ტექნიკური მონაცემების დემონსტრირება სურათის ნახვისას;
• პროგრამული პროდუქტი აღარ არის მხარდაჭერილი დეველოპერების მიერ.