የድር ጣቢያዎን ዲዛይን በሚያደርጉበት ጊዜ ፣ የማያ ገጽ መጠን እና ቅርፅ ምንም ይሁን ምን በማንኛውም መሣሪያ ላይ ጥሩ መስሎ ማረጋገጥ አስፈላጊ ነው። ምላሽ ሰጪ ድር ጣቢያዎች እንደ ኮምፒውተሮች ፣ ስልኮች ፣ ጡባዊዎች ፣ ቴሌቪዥኖች ፣ ተለባሾች እና እንዲያውም የመኪና ማያ ገጾች ባሉ በሁሉም ዘመናዊ መሣሪያዎች ላይ ጥሩ ሆነው እንዲታዩ የተነደፉ ናቸው። ድር ጣቢያ ምላሽ ሰጭ ለማድረግ ፣ በተወሰኑ ሁኔታዎች ላይ በመመስረት የእሱን ንጥረ ነገሮች በራስ -ሰር ለመለወጥ የእርስዎን CSS እና የኤችቲኤምኤል ኮድ መለወጥ ያስፈልግዎታል። ይህ wikiHow መሠረታዊ ምላሽ ሰጪ የድር ዲዛይን እንዴት ማቀድ እና መተግበር እንደሚችሉ ያስተምርዎታል።
ደረጃዎች
ዘዴ 1 ከ 3: ምላሽ ሰጪ ንድፍ ማቀድ
ደረጃ 1. ታዳሚዎችዎ ድር ጣቢያዎን እንዴት እንደሚጠቀሙ ይወቁ።
በእነዚህ ቀናት ፣ ድሩን የሚያሰሱ ብዙ ሰዎች ይህንን የሚያደርጉት ከሞባይል ስልኮች እና ከጡባዊ ተኮዎች ነው። አንድ ጣቢያ ምላሽ ሰጭ እንዲሆን በየትኛውም ቦታ ቢታይም በትክክል እንዲታይ ማረጋገጥ አለብዎት። ጊዜ እና ገንዘብ መሠረታዊ ከሆኑ በተጠቃሚዎችዎ በጣም ተወዳጅ በሆኑ የመሣሪያዎች ዓይነቶች (ይህ መረጃ የሚገኝ ከሆነ) እና ጣቢያዎን እንዴት እንደሚጠቀሙ ላይ ያተኩሩ። የትንተና ሶፍትዌርዎን ወይም ሌላ የምርምር ዘዴን በመጠቀም ይህንን ይወቁ
- ለሞባይል ስልክ/ጡባዊ/የኮምፒተር ብራንዶች እና ማያ/ጥራት መጠኖች ልዩ ትኩረት በመስጠት ድር ጣቢያውን ለማየት ብዙውን ጊዜ ምን ዓይነት መሣሪያዎች ይጠቀማሉ።
- ምን አሳሾች በተጠቃሚዎችዎ በጣም ታዋቂ ናቸው። ዓለም አቀፋዊ ስታትስቲክስን በተመለከተ ጉግል ክሮም በዓለም ዙሪያ በጣም ታዋቂ የድር አሳሽ ነው ፣ ግን ሳፋሪ የቅርብ ሰከንድ ነው።
- ጎብ visitorsዎችዎ ድር ጣቢያዎን እንዴት እንደሚጠቀሙበት ፣ ለምሳሌ እሱን ለማየት ምን ያህል ጊዜ እንደሚያሳልፉ ፣ የት እንደሚመለከቱት እና የትኛው ይዘት በጣም ታዋቂ ነው። ይህ የትኛውን የይዘት አይነት ማካተት አስፈላጊ እንደሆነ እና የትኛውን መተው እንደሚቻል ለመወሰን ይረዳዎታል።
ደረጃ 2. ለተለያዩ መሣሪያዎች የተለያዩ አቀማመጦችን ይንደፉ።
የተጠቃሚ መሣሪያን ፣ እንዲሁም አቅሞቹን (ጃቫን ፣ ፍላሽ ፣ ወዘተ የሚደግፍ)) እና የጣቢያዎን የተወሰነ ስሪት በዚህ መሠረት ለማሳየት የሲኤስኤስ እና የጃቫስክሪፕት ጥምርን መጠቀም ይችላሉ። የሲኤስኤስ ሚዲያ መጠይቆች በተለይ የመሣሪያውን መጠን/ጥራት ለመወሰን ጠቃሚ ናቸው።
ደረጃ 3. ለተለያዩ የግንኙነቶች ዓይነቶች ሂሳብ።
የእርስዎ ጎብitor አይጥ ፣ የቁልፍ ሰሌዳ ፣ የንኪ ማያ ገጽ ወይም ሌላው ቀርቶ ማየት ለተሳናቸው ሰዎች ማያ ገጽ አንባቢን በመጠቀም ከድር ጣቢያዎ ጋር መስተጋብር ሊፈጥር ይችላል። ይህንን ከግምት በማስገባት ድር ጣቢያዎ ለመዳፊት ጠቅታዎች ፣ የቁልፍ ሰሌዳ ቁልፎች (ትር ፣ አስገባ ፣ መመለስ ፣ ወዘተ ፣) እና የማያ ገጽ ጣቶች ንክኪዎች ምላሽ መስጠት አለበት።
የማንዣበብ ውጤቶች ከአይጥ በስተቀር በምንም አይሰሩም። እነዚህን ተፅእኖዎች ከመጠቀም ይልቅ ጎብitorው ቀደም ሲል በመዳፊት ማንዣበብ ላይ የታየውን ሁሉ ለማሳየት አንድ አዝራር ወይም አዶ ጠቅ እንዲያደርግ ሊጠይቁ ይችላሉ።
ደረጃ 4. የይዘት አስተዳደር ስርዓት (ሲኤምኤስ) መጠቀም ያስቡበት።
የጣቢያዎ ዲዛይን ምላሽ ሰጪ መሆኑን ለማረጋገጥ ቀላሉ መንገድ አስቀድሞ የተገነባ ምላሽ ሰጪ ገጽታ ያለው ሲኤምኤስን መጠቀም ነው። እንደ Joomla ፣ Drupal ወይም Wordpress ያሉ ሲኤምኤስን በመጠቀም ምላሽ ሰጪ አካላትን እራስዎ ኮድ ሳያስቀምጡ ድር ጣቢያዎ በሁሉም መሣሪያዎች ላይ ጥሩ ሆኖ እንዲታይ ያስችልዎታል። የትኞቹ የሲኤምኤስ መሣሪያዎች በአገልግሎትዎ እንደሚገኙ ለማየት ከድር አስተናጋጅ አቅራቢዎ ጋር ያረጋግጡ።
ደረጃ 5. ድር ጣቢያዎን ለመፈተሽ የመስመር ላይ መሳሪያዎችን ይጠቀሙ።
አሁን ምላሽ ሰጪ የድር ዲዛይን በታዋቂነት ጨምሯል ፣ ድር ጣቢያዎን ለመሞከር ሊጠቀሙባቸው የሚችሉ የተለያዩ ነፃ መሣሪያዎች አሉ። እርስዎ ድር ጣቢያዎን አስቀድመው ኮድ ካደረጉ ፣ ምላሽ ሰጪነትን የት ማሻሻል እንዳለብዎት እንዲያውቁ በተለያዩ ሁኔታዎች ውስጥ እንዴት እንደሚመስል ለመሞከር እነዚህን መሣሪያዎች ይጠቀሙ።
- በ Google ለሞባይል ተስማሚ ሙከራ-ጣቢያዎ በኮምፒተር ማያ ገጾች ላይ እንደሚደረገው በተንቀሳቃሽ መሣሪያዎች ላይም እንዲሁ ይሰራ እንደሆነ ለማወቅ ያስችልዎታል።
- resizeMyBrowser: ጣቢያዎን በተለያዩ ጥራቶች እንዲያዩ ያስችልዎታል።
- ምላሽ ሰጪ-ጣቢያዎን በተለያዩ የመሣሪያ ማያ ገጾች ላይ በተለያዩ አቀማመጦች (በጎን ወይም በቀኝ ጎን) ያሳያል።
ዘዴ 2 ከ 3 የገጹን አቀማመጥ ምላሽ ሰጪ ማድረግ
ደረጃ 1. ነፃ ምላሽ ሰጪ የቅጥ ሉህ ማዕቀፍ ያስቡ።
ማዕቀፍ ለጣቢያዎ እንደ አጽም ሊጠቀሙበት የሚችሉት የኤችቲኤምኤል ፣ የሲኤስኤስ እና/ወይም ጃቫስክሪፕት አስቀድሞ የተፃፈ ስብስብ ነው። ማዕቀፎች ከሁሉም አሳሾች ጋር ለመስራት ተፈትነዋል እና ተመቻችተዋል ፣ ስለዚህ ማድረግ ያለብዎት ይዘትዎን ማስገባት ፣ የሚዲያ እና የቀለም ምርጫዎችዎን ማከል እና ጣቢያዎን ማተም ብቻ ነው። አንዳንድ ታዋቂ ማዕቀፎች የሚከተሉት ናቸው
- የጫማ ማሰሪያ
- አጽም
- ፋውንዴሽን
ደረጃ 2. የእይታ ማሳያውን በሜታ መለያ ያዘጋጁ።
ማዕቀፍ የማይጠቀሙ ከሆነ ምላሽ ሰጭ ድር ጣቢያ ኮድ በመስጠት በጣም አስፈላጊ በሆነው ገጽታ - Viewport ን መጀመር ይፈልጋሉ። መመልከቻው ለተጠቃሚው የሚታየው የድር ጣቢያው አካል ነው። የማያ ገጽ መጠን ምንም ይሁን ምን ጣቢያዎ በትክክል እንዲታይ ለማድረግ ቁልፉ በ META መለያ ውስጥ የእይታ ማሳያ መጠንን ማሳደግ ነው። ይህንን ለማድረግ በጣቢያው ላይ በእያንዳንዱ ገጽ አናት ላይ ይህን መለያ ያካትቱ
ደረጃ 3. ከእይታ መመልከቻ አንፃር የጽሑፉን መጠን ይግለጹ።
አንዴ የእይታ ማሳያዎ ከተዘጋጀ በኋላ በገጽዎ ላይ ያለው ጽሑፍ ከማያ ገጹ ጋር የሚስማማ ይሆናል። ሆኖም ፣ መጠኖቻቸው ከእይታ እይታ ጋር በተያያዘ ካልተገለጹ ቅርጸ -ቁምፊዎች በጣም ትልቅ ወይም በጣም ትንሽ ሊሆኑ ይችላሉ። ከ vw አሃድ ጋር የቅርጸ ቁምፊ መጠኑን እንደ መመልከቻ የተወሰነ መቶኛ በመወሰን ይህንን ማድረግ ይችላሉ። ይህ ምሳሌ የ H1 ራስጌዎች መጠኑ ምንም ይሁን ምን በእይታ መስጫው ስፋት 10% ላይ እንዲያሳዩ ይነግራቸዋል
wikiHow
ደረጃ 4. ለተለያዩ የማያ ገጽ መጠኖች የተለያዩ ዘይቤዎችን ለማሳየት የሚዲያ ጥያቄዎችን ይጠቀሙ።
የሚዲያ መጠይቆች በማያ ገጹ መጠን ላይ በመመስረት የተወሰኑ የ CSS ክፍሎችን ለማሳየት ይፈልጉ እንደሆነ እንዲመርጡ ያስችልዎታል። በእርስዎ የሲኤስኤስ ፋይል ውስጥ የሚዲያ ጥያቄዎን ዝርዝር ሁኔታ መግለፅ ይችላሉ። በዚህ ምሳሌ ውስጥ የተጠቃሚው የማያ ገጽ መጠን 480 ፒክሰል ወይም ከዚያ በላይ ከሆነ የሰውነት ዳራ ቀለም ወደ ቀይ ይለወጣል።
wikiHow
@media ማያ ገጽ እና (ደቂቃ-ስፋት 480 ፒክስል) {አካል {የጀርባ ቀለም-አኳ; }}
ዘዴ 3 ከ 3 - ምስሎችን ምላሽ ሰጪ ማድረግ
ደረጃ 1. ምስሎችን ለመለካት የ CSS ወርድ ንብረትን ይጠቀሙ።
የምስሉን ስፋት ወደ አንድ የተወሰነ የፒክሰሎች መጠን (ለምሳሌ ፣ 500 ፒክስል) ከማቀናበር ይልቅ ምስሉ የወላጁን ስፋት እንዲመለከት እና በዚህ መሠረት እንዲያስተካክል መቶኛ (ለምሳሌ ፣ 100%) ይጠቀሙ። የምስል ስፋት ወደ 100% ማቀናበር በተመልካቹ ማያ ገጽ መጠን ላይ በመመስረት ምስሉ ወደ ላይ እና ወደ ታች ከፍ እንዲል ያስገድደዋል። ይህንን በመስመር ላይ ለማድረግ
ደረጃ 2. የምስሉን ትክክለኛ መጠን ማሳደግን ለመገደብ ከፍተኛውን ስፋት ያለውን ንብረት ይጠቀሙ።
አንድን ምስል ወደ 100% ለማሳደግ በቀደመው ደረጃ የሰፋፊ ንብረቱን የሚጠቀሙ ከሆነ ፣ መጠኑ ምንም ይሁን ምን ምስሉ ከመያዣው 100% ጋር ለመገጣጠም ያድጋል ወይም ይቀንሳል። ይህ ማለት ምስሉ በአነስተኛ ጎኑ ላይ ከሆነ ፣ ከዋናው መጠን እና ያነሰ የጥራት መልክን ከፍ ያደርገዋል። ይህ እንዳይሆን ፣ የምስሉን ከፍተኛ የመጠን መጠን ወደ 100% (ትክክለኛው መጠኑን) ለማዋቀር ከፍተኛውን ስፋት ይጠቀሙ። እንዴት እንደሆነ እነሆ -
ደረጃ 3. በተለያዩ የስክሪን መጠኖች ላይ የተለያዩ ምስሎችን ለማሳየት የኤችቲኤምኤል ሥዕሉን አካል ይጠቀሙ።
በተለያዩ መጠኖች ማያ ገጾች ላይ እንዲታዩ ብጁ መጠን ያላቸውን ምስሎች መፍጠር ከፈለጉ በኤችቲኤምኤል ኮድዎ ውስጥ የትኞቹ ፎቶዎች እንደሚታዩ መግለፅ ይችላሉ። የተለያዩ መጠን ያላቸው ምስሎችን ይፍጠሩ እና ከዚያ በ 600 ፒክስል እና በ 1500 ፒክስል ስፋት ማያ ገጾች ላይ የትኛውን ምስል እንደሚጠቀም ለመለየት ይህንን ኮድ እንደ ምሳሌ ይጠቀሙ።
