አዲስ (በአንፃራዊነት) የመለኪያ አሃዶችን ጠቅሻለሁ። እነዚህ ክፍሎች vw፣ vh፣ vmin እና vmax ናቸው፣ እና በአሳሹ መመልከቻ መጠን ላይ የተመሰረቱ ናቸው። የአሳሽ እይታ ሲቀየር የእነሱ ትክክለኛ መጠን ይቀየራል, እነዚህ ክፍሎች ተስማሚ ያደርጋቸዋል የሚለምደዉ ንድፍ. ምንም እንኳን በቀደመው ጽሁፌ እነዚህን ክፍሎች የፊደል መጠንን ለመለየት እንዳይጠቀሙበት ብከራከርም ከአቀማመጥ አካላት ጋር ለመስራት በጣም ጠቃሚ ሊሆኑ ይችላሉ።
የመመልከቻ ክፍሎች
የመመልከቻ ክፍሎች አንጻራዊ አሃዶች ናቸው, ማለትም እነሱ በትክክል ሊለኩ አይችሉም. መጠናቸው የሚወሰነው በአሳሽ እይታ መጠን ነው. ከመመልከቻው ጋር የተያያዙ አራት ክፍሎች አሉ.
በብዛት ጥቅም ላይ የሚውሉ በመሆናቸው በመጀመሪያዎቹ ሁለቱ ላይ አተኩራለሁ። በብዙ አጋጣሚዎች የመመልከቻ ክፍሎች (vh እና vw) ከችሎታ አንፃር በመቶኛ ይደራረባሉ። ሆኖም ግን, እያንዳንዳቸው የራሳቸው ጥንካሬ እና ድክመቶች አሏቸው.
ለማጠቃለል ያህል ይህን ይመስላል።
ከወርድ ጋር ሲገናኝ % የተሻለ ነው ፣ እና ከፍታ ጋር ሲገናኝ ፣ vh የተሻለ ነው።
ሙሉ ገጽ ስፋት አባሎች፡ % > vw
ቀደም ሲል እንደተናገርኩት vw በእይታ መስጫው ስፋት ላይ በመመርኮዝ የንጥሉን መጠን ይወስናል. ነገር ግን፣ አሳሾች በጥቅልል አሞሌው ቦታ ላይ በመመስረት መጠኑን ያሰላሉ።
የገጹ ስፋት ከመመልከቻው ስፋት ከበለጠ የማሸብለል አሞሌ ይታያል። ነገር ግን, በእውነቱ, የመመልከቻው ስፋት ከኤችቲኤምኤል ኤለመንቱ ስፋት የበለጠ ነው
እይታ > ኤችቲኤምኤል > አካል
ስለዚህ የኤለመንቱን ስፋት ወደ 100vw ካዘጋጁት ኤለመንቱ ከኤችቲኤምኤል እና ከሰውነት በላይ ይዘልቃል። ቪ በዚህ ምሳሌበኤችቲኤምኤል ኤለመንቱ ዙሪያ ቀይ ድንበር ሠራሁ እና ክፍሎቹን በተለያዩ ቀለማት ሞላኋቸው።
በዚህ ልዩነት ምክንያት በመመልከቻው ስፋት ላይ ከመተማመን ይልቅ መቶኛዎችን በመጠቀም በጠቅላላው የገጹ ስፋት ላይ ክፍሎችን መሥራት የተሻለ ነው።
የሙሉ ገጽ ቁመት ክፍሎች፡ vh > %
ከገጹ ጋር ተመሳሳይ ቁመት ያላቸው ንጥረ ነገሮችን በሚፈጥሩበት ጊዜ ከመቶኛ ይልቅ vh ን መጠቀም በጣም ጥሩ ነው። የአንድ ኤለመንት መቶኛ መጠን ከወላጅ ኤለመንቱ አንጻራዊ ስለሆነ የንጥሉን ቁመት ማግኘት እንችላለን እኩል ቁመትማያ ገጹ የወላጅ ኤለመንቱ የስክሪኑን አጠቃላይ ቁመት የሚይዝ ከሆነ ብቻ ነው። ይህ ማለት የኤችቲኤምኤል ኤለመንቱን ወላጅ ለማድረግ ኤለመንቱን እንደ ቋሚ ቦታ ማስቀመጥ አለብን ወይም አንዳንድ መጥለፍን መጠቀም አለብን።
ይህንን ውጤት ለማግኘት vh ን መጠቀም በጣም ቀላል ነው፡-
ምሳሌ (ቁመት: 100vh;)
የ.ምሳሌ ኤለመንት እንዴት እንደተሰቀለ ምንም ይሁን ምን ልኬቶቹ ከእይታ መስቀያው ልኬቶች አንጻር ሊቀመጡ ይችላሉ። አብዛኞቹ ጣቢያዎች አግድም ጥቅልል ስለሌላቸው የማሸብለል ችግር አያስጨንቀንም።
vh አሃዶችን እንዴት መጠቀም እንደሚቻል አንዳንድ ምሳሌዎች እዚህ አሉ።
የሙሉ ማያ ገጽ ዳራ ምስሎች
የተለመደው የvh አሃድ አጠቃቀም የመሳሪያው መጠን ምንም ይሁን ምን የስክሪኑን አጠቃላይ ቁመት እና ስፋት የሚሸፍን የጀርባ ምስል መፍጠር ነው። ይህን ማድረግ በጣም ቀላል ነው።
Bg (አቀማመጥ፡ አንጻራዊ፤ ዳራ፡ url("bg.jpg") መሃል/ሽፋን፤ ስፋት፡ 100%፤ ቁመት፡ 100vh፤)
በተመሳሳይ መልኩ, ለእያንዳንዱ ክፍል የእይታ መመዘኛዎችን በመስጠት "ገጾች" ተጽእኖ መፍጠር እንችላለን.
ክፍል (ወርድ: 100%; ቁመት: 100vh;)
ገጽ የማዞር ቅዠትን ለመፍጠር ጃቫ ስክሪፕትን መጠቀም እንችላለን።
$ ("nav") .ላይ ("ጠቅ አድርግ", ተግባር () (ከሆነ ($ (ይህ).hasClass ("ታች")) ( var movePos = $ (መስኮት) ማሸብለል ቶፕ () + $ (መስኮት). ቁመት (); አኒሜት (( scrollTop: movePos), 1000 ))
የሚታጠፍ ምስል
Vh በገጽ ውስጥ ያለውን የምስል መጠን ለመቆጣጠርም ጥቅም ላይ ሊውል ይችላል። ለምሳሌ, በአንቀጽ ማዕቀፍ ውስጥ. የስክሪኑ መጠን ምንም ይሁን ምን ማንኛውም ምስል ሙሉ በሙሉ እንደሚታይ ማረጋገጥ እንፈልጋለን።
የሚከተለውን ኮድ እንፈልጋለን
Img (ወርድ: ራስ; /* ራስ-ሰር ስፋት ከቁመት ጋር የሚመጣጠን */ ከፍተኛ-ስፋት: 100%; /* አይደለም ተጨማሪ ስፋትየወላጅ አካል */ ከፍተኛ-ቁመት: 90vh; /* የመመልከቻውን ከፍታ ሳይጨምር */ ህዳግ: 2rem auto; )
የአሳሽ ድጋፍ
እነዚህ ክፍሎች በአንፃራዊነት አዲስ ስለሆኑ፣ አሁንም በአንዳንድ አሳሾች ላይ ችግሮች አሉ።
እነሱን እንዴት እንደሚፈቱ እነሆ።
ልኬቶችን ለማዘጋጀት የተለያዩ ንጥረ ነገሮች CSS ፍጹም እና ይጠቀማል አንጻራዊ ክፍሎችመለኪያዎች. ፍፁም አሃዶች ከውጤት መሳሪያው ነጻ ናቸው፣ ነገር ግን አንጻራዊ አሃዶች የአንድን ንጥረ ነገር መጠን ከሌላው መጠን ዋጋ ጋር ይገልፃሉ።
አንጻራዊ ክፍሎች
አንጻራዊ ክፍሎች ብዙውን ጊዜ ከጽሑፍ ጋር ለመስራት ያገለግላሉ። በሠንጠረዥ ውስጥ 1 ዋና ዋና አንጻራዊ ክፍሎችን ይዘረዝራል.
የ em ክፍል ነው። ተለዋዋጭ እሴት, አሁን ባለው ንጥረ ነገር የቅርጸ-ቁምፊ መጠን ላይ የሚመረኮዝ ነው (መጠኑ በቅርጸ ቁምፊ መጠን የቅጥ ንብረቱ በኩል ተዘጋጅቷል). እያንዳንዱ አሳሽ አብሮ የተሰራ የጽሑፍ መጠን አለው ይህ መጠን በግልጽ ካልተገለጸ ጥቅም ላይ ይውላል። ስለዚህ፣ መጀመሪያ ላይ 1em ከአሳሹ ነባሪ የቅርጸ-ቁምፊ መጠን ወይም የወላጅ አባል ቅርጸ-ቁምፊ መጠን ጋር እኩል ነው። የመቶኛ ምልክት ከ em ጋር ተመሳሳይ ነው ፣ በዚህ ውስጥ የ 1em እና 100% እሴቶች እኩል ናቸው።
አሃዱ ex በ ውስጥ “x” የቁምፊ ቁመት ተብሎ ይገለጻል። ንዑስ ሆሄያት. ex ልክ እንደ em ተመሳሳይ ደንቦች ተገዢ ነው, ማለትም ከአሳሹ ነባሪ የቅርጸ ቁምፊ መጠን ወይም ከወላጅ ንጥረ ነገር ቅርጸ-ቁምፊ መጠን ጋር የተያያዘ ነው.
የ ch ዩኒት ለአሁኑ ኤለመንት ከ "0" ቁምፊ ስፋት ጋር እኩል ነው እና ልክ እንደ em, በቅርጸ ቁምፊው መጠን ይወሰናል.
በኤም እና ሬም መካከል ያለው ልዩነት እንደሚከተለው ነው. em በወላጅ ኤለመንት ቅርጸ-ቁምፊ መጠን ይወሰናል እና በእሱ ይለወጣል፣ እና rem ከስር ኤለመንት ጋር የተሳሰረ ነው፣ ማለትም ለኤችቲኤምኤል ኤለመንት የተገለጸው የቅርጸ-ቁምፊ መጠን።
እንዲሁም ከአሳሽ መመልከቻ መጠን ጋር የተቆራኙ አንጻራዊ ክፍሎች ቡድን አለ። በሠንጠረዥ ውስጥ 2 የእነሱን ዝርዝር ከማብራሪያ ጋር ያሳያል.
ፍጹም ክፍሎች
ፍፁም ክፍሎች ናቸው። አካላዊ ልኬቶች- ኢንች፣ ሴንቲሜትር፣ ሚሊሜትር፣ ነጥቦች፣ ፒካዎች እና ፒክስሎች። ዝቅተኛ ዲፒአይ ላላቸው መሳሪያዎች (በአንድ ኢንች የፒክሰሎች ብዛት የፒክሰል ጥንካሬን ይወስናል) ማሰሪያው በፒክሰል ነው። በዚህ ሁኔታ አንድ ኢንች ከ 96 ፒክሰሎች ጋር እኩል ነው. በእርግጥ እውነተኛው ኢንች በእንደዚህ አይነት መሳሪያ ላይ ካለው ኢንች ጋር አይዛመድም። በከፍተኛ ዲፒአይ መሳሪያዎች ላይ ትክክለኛው ኢንች በስክሪኑ ላይ ካለው ኢንች ጋር ተመሳሳይ ነው፣ ስለዚህ የፒክሰል መጠኑ እንደ 1/96 ኢንች ይሰላል። በሠንጠረዥ ውስጥ 3 መሰረታዊ ፍፁም አሃዶችን ይዘረዝራል።
ለምሳሌ
30 ፒክስል ራስጌ
የጽሑፍ መጠን 1.5 ኤም
ባለ 24 ነጥብ ርዕስ
ጽሑፍን በ30 ሚሊሜትር ወደ ቀኝ ቀይር
ማስታወሻ
ልኬቶችን ሲያቀናብሩ የመለኪያ አሃዶችን መግለጽዎን ያረጋግጡ ፣ ለምሳሌ ስፋት: 30 ፒክስል። አለበለዚያ አሳሹ የሚፈልገውን መጠን ስለማያውቅ የተፈለገውን ውጤት ማሳየት አይችልም. ክፍሎች ሲጨመሩ ብቻ አይታከሉም። ዜሮ እሴት(ህዳግ፡ 0)
ኢንተርኔት ኤክስፕሎረርከቪሚን ይልቅ ቪኤም ዩኒትን ይደግፋል።
ዝርዝር መግለጫ
እያንዳንዱ ዝርዝር መግለጫ በበርካታ የማረጋገጫ ደረጃዎች ውስጥ ያልፋል።
- ምክር - መግለጫው በW3C ጸድቋል እና እንደ መደበኛ ይመከራል።
- የእጩዎች ምክር ( ሊሆን የሚችል ምክር ) - ደረጃውን የጠበቀ ኃላፊነት ያለው ቡድን ግቦቹን በማሟላቱ ረክቷል, ነገር ግን ደረጃውን ለመተግበር ከልማቱ ማህበረሰብ እርዳታ ይጠይቃል.
- የቀረበ ምክር የተጠቆመ ምክር) - በዚህ ደረጃ ሰነዱ ለመጨረሻ ጊዜ እንዲፀድቅ ለ W3C አማካሪ ምክር ቤት ቀርቧል።
- የስራ ረቂቅ - ለማህበረሰብ ግምገማ ውይይት የተደረገበት እና የተሻሻለው የበለጠ የበሰለ የረቂቅ ስሪት።
- የአርታዒው ረቂቅ ( የአርትዖት ረቂቅ) - በፕሮጀክት አርታኢዎች ለውጦች ከተደረጉ በኋላ የደረጃው ረቂቅ ስሪት።
- ረቂቅ ( ረቂቅ ዝርዝር) - የመደበኛው የመጀመሪያው ረቂቅ ስሪት.
እንደ vh፣ vw፣ vmin፣ vmax ያሉ አዲስ አንጻራዊ ክፍሎች ወደ CSS3 ተጨምረዋል። እነዚህ ክፍሎች ከአሳሽ መስኮቱ መጠን አንጻር ይሰላሉ. ለ ዴስክቶፕ ኮምፒውተሮችየአሳሽ መስኮቱ ስፋት ከእይታ ቦታው ስፋት የበለጠ ነው (የማሸብለያ አሞሌው ስፋት ተጨምሯል) ስለዚህ የንጥሉን ስፋት ወደ 100vw ካዘጋጁት ከኤችቲኤምኤል በላይ ይሄዳል።
ሩዝ. 1. የሙሉ ስክሪን ዳራ ምስል ከወርድ 100ቮ የአሳሽ ድጋፍ
IE፡ 9.0 ከvmax በስተቀር፣ ከvmin ይልቅ vm ይጠቀሙ
ጠርዝ፡ 12.0 ከvmax በስተቀር፣ ከvmin ይልቅ vm ይጠቀሙ
ፋየርፎክስ፡ 19.0
Chrome፡ 26.0
ኦፔራ፡ 15.0
ሳፋሪ፡ 6.1
iOS Safari፡ 8.0
አንድሮይድ፡ 4.4
Chrome ለአንድሮይድ: 55.0
1. ክፍሎች vh እና vw
ቴክኒኮች ምላሽ ሰጪ የድር ንድፍበመቶኛ ዋጋዎች አጠቃቀም ላይ የተመሰረቱ ናቸው. ፍላጎቱ ግን ሩቅ ነው። ምርጥ መፍትሄለእያንዳንዱ ጉዳይ፣ እነሱ የሚሰሉት ከቅርቡ የወላጅ አካል ልኬቶች አንጻር ነው። ስለዚህ, የአሳሽ መስኮቱን ቁመት እና ስፋት ለመጠቀም ከፈለጉ, vh እና vw ክፍሎችን መጠቀም የተሻለ ነው. ለምሳሌ የአሳሽ መስኮት ቁመት 900 ፒክስል ከሆነ 1vh 9 ፒክስል ይሆናል። በተመሳሳይም የአሳሹ መስኮት ስፋት 1600 ፒክስል ከሆነ 1vw 16 ፒክስል ይሆናል።
1.1. ምላሽ ሰጪ የሙሉ ማያ ገጽ ዳራ ምስል
ከ 100vw ጋር የተገለጸው ኤለመንት ስፋት ከእይታ ቦታው ስፋት ስለሚበልጥ ሙሉ ማያ ገጽ ለመፍጠር የጀርባ ምስሎችየ 100% ስፋትን መጠቀም የተሻለ ነው, ይህም ከስር html ኤለመንት ስፋት ጋር እኩል ይሆናል.
ሙሉ ስክሪን-ቢግ (ዳራ፡ url(image.jpg)፤ ዳራ-አቀማመጥ፡ መሃል፤ የበስተጀርባ መጠን፡ ሽፋን፤ ስፋት፡ 100%፤ ቁመት፡ 100vh፤) 
ሩዝ. 2. ምላሽ ሰጪ የሙሉ ስክሪን ዳራ ምስል
1.2. የሙሉ ገጽ ስላይድ ውጤት
የአሳሽ መስኮቱን አጠቃላይ ቁመት ለማገድ ቁመትን ማዘጋጀት ያስፈልግዎታል: 100%; ለሶስት አካላት - ኤችቲኤምኤል ፣ አካል እና በቀጥታ ለእገዳው ራሱ
ኤችቲኤምኤል፣ አካል (ቁመት: 100%;) ክፍል (ቁመት: 100%;)
ምክንያቱም መቶኛ መጠኖችከእሴቶቹ አንጻር ይሰላሉ የወላጅ አካላት, ከዚያ ለእያንዳንዱ ተስማሚ እሴቶችን ማዘጋጀት ያስፈልግዎታል DOM አባል. ዋጋው በቀጥታ ከአሳሽ መስኮቱ አንጻር ስለሚሰላ የvh መለኪያ እሴቶችን ሰንሰለት ማድረግ አያስፈልገውም፡-
ክፍል (ቁመት: 100vh;)
ቀስቱን ጠቅ ሲያደርጉ በተንሸራታቾች ውስጥ ማሸብለል የሚያስከትለው ውጤት በትንሹ jQuery ስክሪፕት በመጠቀም ይተገበራል፡
JQuery (ሰነድ) .ዝግጁ (ተግባር ($) ($ ("nav")) .ላይ ("ጠቅ ያድርጉ", ተግባር () (ከሆነ ($ (ይህ).hasClass ("ታች")) (var movePos = $ (መስኮት) ).ማሸብለል (መስኮት) );
ከ vh ጋር የተገለጸው ቁመት በገጹ ላይ ያለውን ኤለመንትን ለመሃል ሊያገለግል ይችላል።
CSS3 አዲስ የመለኪያ አሃዶች አሉት። (ስለዚህ ጉዳይ አስቀድሜ የተናገርኩ ይመስለኛል። ኢንጅነር) ስለ px፣ pt፣ em እና አዲሱ ሬም ሰምተሃል። ጥቂቶቹን እንመልከት፡- vw እና vh.
ብዙውን ጊዜ በአቀማመጥ ውስጥ በአሳሽ መመልከቻ ውስጥ ለመገጣጠም ዋስትና ያላቸው አካላት አሉ. በአጠቃላይ, ጃቫ ስክሪፕት ለዚህ ጥቅም ላይ ይውላል. የመመልከቻውን መጠን እንፈትሽ እና የንጥረ ነገሮችን መጠን በዚሁ መሰረት እንቀይር። ተጠቃሚው የአሳሽ መስኮቱን መጠን ከቀየረ, ሂደቱ ይደገማል.
vw/vh ን በመጠቀም የንጥረቶችን መጠን ከእይታ ቦታው መጠን ጋር ማቀናበር እንችላለን። የvw/vh አሃዶች ትኩረት የሚስቡ ናቸው ምክንያቱም 1vw ከመመልከቻው ስፋት 1/100ኛ ጋር እኩል የሆነ አሃድ ለአንድ ኤለመንት ከእይታ ስፋት ጋር እኩል የሆነ ስፋትን ለመመደብ ለምሳሌ ስፋት፡100vw ማዘጋጀት ያስፈልግዎታል።
እንዴት መጠቀም እንደሚቻል
Lightboxes vw እና vh ን ለመጠቀም በጣም ጥሩ እጩ ናቸው ምክንያቱም እነሱ ብዙውን ጊዜ የሚቀመጡት ከእይታ እይታ አንጻር ነው ፣ ግን ያንን ቦታ አገኘሁት-ከላይ ፣ ከታች ፣ ግራ እና ቀኝ እሴቶች ጋር የተስተካከለ ማዋቀር ስለሌለዎት ለመጠቀም ቀላል ነው። ቁመቱ እና ስፋቱ በአጠቃላይ.በመደበኛ ፍሰት ውስጥ ያሉትን የንጥረ ነገሮች መጠን ለማዘጋጀት አዲሱን የመለኪያ አሃዶች መጠቀም ይችላሉ። ለምሳሌ፣ በገጹ ላይ ቅጽበታዊ ገጽ እይታዎችን መለጠፍ እችላለሁ። የእነዚህ ቅጽበታዊ ገጽ እይታዎች ቁመት ከእይታ እይታ ቁመት መብለጥ የለበትም። ይህንን ለማድረግ የምስሎቹን ከፍተኛ ቁመት ማዘጋጀት እችላለሁ-
Img (ከፍተኛ-ቁመት:95vh;)
ውስጥ በዚህ ጉዳይ ላይበስክሪኑ ላይ ሲሆኑ የተወሰነ ቦታ ለመተው ቁመቱን ወደ 95vh አዘጋጀሁት።
