HTML 5 გამოსახულების ადაპტაციური ეკრანი img პროპორციული სკალირების კოდი ვებგვერდისთვის HTML XNUMX

მზარდი მობილური ინტერნეტის გამო,Wechat მარკეტინგიმობილური ტელეფონების პოპულარობა გახდა生活აუცილებელი ინსტრუმენტი.

ააშენეთ სადგურიშაბლონი, რეკომენდებულია გამოყენებაWordPressადაპტირებული თემა:

რას ნიშნავს CSS გამოსახულების ადაპტაცია?

CSS გამოსახულების თვითადაპტაცია გულისხმობს სურათების შექმნას html ვებ გვერდზე, CSS კოდის საშუალებით:

შემდეგი,ჩენ ვეილიანგიმე გაგიზიარებთ CSS img პროპორციული სკალირების კოდს ^_^

CSS გამოსახულების სიმაღლე და სიგანე ადაპტური კოდი

სურათის ჩასმა html-ში:

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

თქვენ შეგიძლიათ დაამატოთ შემდეგი კოდი თქვენი WordPress თემის ▼ style.css ფაილში

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

განცხადება აქmax-widthმაქსიმალური სიგანის წესი

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

width:auto;ნიშნავს ავტომატურ სიგანეს

\9 ეს არის hack css-ის დაწერის საშუალება.

• ამ გზით, "\9" ემატება ჩვეულებრივ css კოდს, მხოლოდ IE ბრაუზერს შეუძლია მისი ამოცნობა, სხვა ბრაუზერები უგულებელყოფენ ამ განცხადებას.
• ეს მიაღწევს ბრაუზერის დიფერენციაციას, რაც შესაძლებელს გახდის თავსებადი ბრაუზერების დანიშნულებას.

რატომ არ გამოიყენოთ სიგანე: 100%?

სურათების ავტომატური სკალირების მისაღწევად, ასევე შეგიძლიათ გამოიყენოთ უფრო ხშირად გამოყენებული სიგანის თვისებები, მაგ.width：100％.

თუმცა, ეს წესი აქ არ მოქმედებს.

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

注意 事项

რა არის CSS სელექტორები? რა განსხვავებაა კლასსა და id-ს შორის?შემდეგ გაკვეთილებში საუბარია ▼-ზე

რა განსხვავებაა CSS სელექტორის კლასსა და id-ს შორის? id და კლასის გამოყენება HTML-ში

რა განსხვავებაა CSS სელექტორის კლასსა და id-ს შორის? ID და კლასის გამოყენება HTML-ში Chen Weiliang ამჟამად ახორციელებს SEO-ს და ვებსაიტის WordPress თემის ოპტიმიზაციას.მართალია ადრე ვისწავლე HTML და CSS საბაზისო ცოდნა, მაგრამ დიდი ხანია არ ვმუშაობდი, განსაკუთრებით CSS ნაწილი...

როგორ უკრავს მობილური ვებსაიტი MP4 ვიდეოს ადაპტირებულ გვერდზე?გთხოვთ, დააწკაპუნოთ ქვემოთ მოცემულ ბმულზე ▼

როგორ ადაპტირდება H5 ვებგვერდი MP4 გვერდზე? მობილური ვებსაიტი უკრავს ვიდეო html კოდს

ვიდეო მარკეტინგი ონლაინ მარკეტინგის განუყოფელი ნაწილია: ბევრი ონლაინ პრომო პრაქტიკოსი ხშირად იყენებს ვიდეოს კომბინირებულ „ვირუსულ მარკეტინგთან“ ტრაფიკის გასაძლიერებლად.თუ WeChat მარკეტინგი შერწყმულია ვიდეო მარკეტინგით, მას შეუძლია კიდევ უფრო გააუმჯობესოს ახალი მედიისა და სოციალური ელექტრონული კომერციის კონვერტაციის მაჩვენებელი.Მე მყავს ბევრი მეგობარი...