உள்ளடக்கம்
- பதிலளிக்கக்கூடிய படங்கள்
- செயல்திறன்
- நிபந்தனை மற்றும் சோம்பேறி ஏற்றுதல்
- பொறுப்பு அச்சுக்கலை
- ஜாவாஸ்கிரிப்டில் ஊடக வினவல்கள்
- முற்போக்கான விரிவாக்கம்
- தளவமைப்பு
- CSS கட்டம் தளவமைப்பு
- இறுதியாக
பதிலளிக்கக்கூடிய வலை வடிவமைப்பு நம்பமுடியாத அளவிற்கு எளிமையானது. தளவமைப்பிற்கான நெகிழ்வான கட்டங்களைத் தேர்வுசெய்து, நெகிழ்வான மீடியாவைப் பயன்படுத்தவும் (படங்கள், வீடியோ, ஐஃப்ரேம்கள்), மற்றும் எந்தக் காட்சியிலும் உள்ளடக்கத்தை சிறந்த முறையில் ஒழுங்கமைக்க இந்த அளவீடுகளைப் புதுப்பிக்க ஊடக வினவல்களைப் பயன்படுத்துங்கள். நடைமுறையில் நாம் கற்றுக்கொண்டது உண்மையில் அவ்வளவு எளிதானது அல்ல. ஒவ்வொரு திட்டத்தின் போதும் வளரும் சிறிய சிக்கல்கள் நம் தலையை சொறிந்துகொண்டே இருக்கும், அவ்வப்போது விரல் நகம் அகழிகளை கூட எங்கள் மேசைகளில் செதுக்குகின்றன.
நான் பொறுப்பு வடிவமைப்பு வாராந்திர செய்திமடலைக் கையாளத் தொடங்கியதிலிருந்து, வலை சமூகத்தின் பல உறுப்பினர்களுடன் பேசுவதற்கும் அவர்களின் அனுபவங்களைக் கேட்பதற்கும் நான் அதிர்ஷ்டசாலி. சமூகம் உண்மையில் என்ன கற்றுக்கொள்ள விரும்புகிறது என்பதைக் கண்டுபிடிக்க நான் விரும்பினேன், எனவே வாசகர்களுக்கு ஒரு கணக்கெடுப்பை விநியோகித்தேன். சிறந்த முடிவுகள் இங்கே:
- பதிலளிக்கக்கூடிய படங்கள்
- செயல்திறனை மேம்படுத்துதல்
- பொறுப்பு அச்சுக்கலை
- ஜாவாஸ்கிரிப்டில் ஊடக வினவல்கள்
- முற்போக்கான விரிவாக்கம்
- தளவமைப்பு
அந்த தலைப்புகளை மனதில் கொண்டு, எங்கள் தொழில் தலைவர்களில் சிலரின் எண்ணங்களை கேட்டு தொடர்ச்சியான பாட்காஸ்ட்களை ஓடினேன். அவர்களின் பதில்களில், ஒரு புள்ளி ஒருமனதாக இருந்தது: உற்சாகமான மற்றும் மேம்பட்ட நுட்பங்களைப் பற்றி நீங்கள் கவலைப்படத் தொடங்குவதற்கு முன்பு அடிப்படைகளை சரியாகப் பெறுவதில் கவனம் செலுத்துங்கள். விஷயங்களை மீண்டும் அடிப்படைகளுக்கு எடுத்துச் செல்வதன் மூலம், அனைவருக்கும் ஒரு வலுவான இடைமுகத்தை உருவாக்க முடியும், சாதனம் அல்லது பயனரின் சூழல் அனுமதிக்கும்போது அம்சங்களை அடுக்குகிறது.
’அப்படியென்றால் ... இந்த மேம்பட்ட நுட்பங்களைப் பற்றி என்ன?’ நீங்கள் கேட்பதை நான் கேட்கிறேன். ஸ்டீபன் ஹே சொன்னபோது இதை மிகச் சுருக்கமாகக் கூறினார்: ’எந்தவொரு மேம்பட்ட RWD நுட்பங்களையும் பயன்படுத்தாமல் தொடங்குவதே இறுதி RWD நுட்பமாகும். கட்டமைக்கப்பட்ட உள்ளடக்கத்துடன் தொடங்கி உங்கள் வழியை உருவாக்குங்கள். வடிவமைப்பு உடைந்து உள்ளடக்கம் அதைக் கட்டளையிடும்போது மட்டுமே ஒரு இடைவெளியைச் சேர்க்கவும் ... அதுதான். ’
இந்த கட்டுரையில், நான் அடிப்படைகளுடன் தொடங்குவேன் மற்றும் நிலைமை அனுமதிக்கும்போது சிக்கலான அடுக்குகளைச் சேர்ப்பேன், அந்த மேம்பட்ட நுட்பங்களை உருவாக்க. தொடங்குவோம்.
பதிலளிக்கக்கூடிய படங்கள்
ஈதன் மார்கோட்டால் முதலில் வரையறுக்கப்பட்டபோது திரவ ஊடகம் RWD இன் முக்கிய பகுதியாக இருந்தது. அகலம்: 100%; , அதிகபட்ச அகலம்: 100%; இன்றும் செயல்படுகிறது, ஆனால் பதிலளிக்கக்கூடிய பட நிலப்பரப்பு மிகவும் சிக்கலானதாகிவிட்டது. திரை அளவுகள், பிக்சல் அடர்த்தி மற்றும் சாதனங்களின் எண்ணிக்கையை அதிகரிப்பதன் மூலம் நாங்கள் அதிக கட்டுப்பாட்டை விரும்புகிறோம்.
மூன்று முக்கிய கவலைகள் பொறுப்பு படங்கள் சமூக குழு (RICG) வரையறுக்கப்பட்டுள்ளன:
- கம்பிக்கு மேல் நாம் அனுப்பும் படத்தின் கிலோபைட் அளவு
- உயர் டிபிஐ சாதனங்களுக்கு நாங்கள் அனுப்பும் படத்தின் உடல் அளவு
- காட்சியமைப்பின் குறிப்பிட்ட அளவுக்கான கலை திசையின் வடிவத்தில் பட பயிர்
இண்டிகோகோவின் உதவியுடன் யோவ் வெயிஸ், பிளிங்க் செயல்படுத்தல் - கூகிளின் வெப்கிட்டின் முட்கரண்டி வேலைகளில் பெரும்பகுதியைச் செய்துள்ளார், நீங்கள் இதைப் படிக்கும் போது இது குரோம் மற்றும் பயர்பாக்ஸில் அனுப்பப்படும். சஃபாரி 8 srcset ஐ அனுப்பும், இருப்பினும் அளவுகள் பண்புக்கூறு இரவுநேர கட்டடங்களில் மட்டுமே உள்ளது மற்றும் படம்> இன்னும் செயல்படுத்தப்படவில்லை.
எங்கள் வலை அபிவிருத்தி செயல்முறைக்கு புதிதாக எதுவும் வருவதால், தொடங்குவது கடினம். படிப்படியாக ஒரு எடுத்துக்காட்டு மூலம் இயங்குவோம்.
img! - படம் அல்லாத அனைத்து உலாவிகளுக்கும் குறைவடையும் படத்தை அறிவிக்கவும் -> src = "horse-350.webp"! - பட அளவுகள் அனைத்தையும் srcset இல் அறிவிக்கவும். ஒவ்வொரு படத்தின் அகலத்தையும் உலாவிக்கு தெரிவிக்க w விளக்கத்தைப் பயன்படுத்தி பட அகலத்தைச் சேர்க்கவும் .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - அளவுகள் எங்கள் தள தளவமைப்பின் உலாவிக்குத் தெரிவிக்கின்றன. 64 எம்களும் பெரியவையும் கொண்ட எந்தவொரு காட்சியமைப்பிற்கும் இங்கே நாங்கள் சொல்கிறோம், 70% காட்சியமைப்பை ஆக்கிரமிக்கும் ஒரு படத்தைப் பயன்படுத்தவும் -> அளவுகள் = "(நிமிடம் அகலம்: 64 எம்) 70 வி.வி ,! - காட்சிப்பலகை இல்லையென்றால் பெரியது, பின்னர் 37.5 எம்களும் பெரியதாக இருக்கும் எந்தவொரு காட்சியமைப்பிற்கும், 95% காட்சியமைப்பை ஆக்கிரமிக்கும் ஒரு படத்தைப் பயன்படுத்தவும் -> (நிமிடம்-அகலம்: 37.5em) 95vw ,! - மற்றும் காட்சிப்பகுதி அதை விட சிறியதாக இருந்தால், பயன்படுத்தவும் 100% பார்வைக் காட்சியை ஆக்கிரமிக்கும் ஒரு படம் -> 100vw "! - எப்போதும் alt உரையைக் கொண்டிருக்கும் .--> alt =" ஒரு குதிரை "/>
செயல்திறன் பார்வையில், அளவுகள் பண்புக்கூறில் நீங்கள் குறைந்தபட்ச அகலம் அல்லது அதிகபட்ச அகலத்தைப் பயன்படுத்தினால் பரவாயில்லை - ஆனால் மூல வரிசை முக்கியமானது. உலாவி எப்போதும் பொருந்தும் முதல் அளவைப் பயன்படுத்தும்.
மேலும், எங்கள் வடிவமைப்பிற்கு எதிராக நேரடியாக வரையறுக்கப்பட வேண்டிய அளவுகளின் பண்புகளை நாங்கள் கடுமையாக குறியிடுகிறோம் என்பதை நினைவில் கொள்க. இது முன்னோக்கி நகரும் சிக்கல்களை ஏற்படுத்தக்கூடும். எடுத்துக்காட்டாக, உங்கள் தளத்தை மறுவடிவமைப்பு செய்தால், நீங்கள் img> அல்லது படம்> கள் அனைத்தையும் மீண்டும் பார்வையிட வேண்டும் மற்றும் அளவுகளை மறுவரையறை செய்ய வேண்டும். நீங்கள் ஒரு CMS ஐப் பயன்படுத்துகிறீர்கள் என்றால், உங்கள் உருவாக்க செயல்முறையின் ஒரு பகுதியாக இதை சமாளிக்க முடியும்.
வேர்ட்பிரஸ் ஏற்கனவே ஒரு சொருகி உள்ளது. இது WP நிலையான பட வகைகளில் srcset ஐ வரையறுக்கிறது மற்றும் ஒரு மைய இடத்தில் அளவுகளை அறிவிக்க உங்களை அனுமதிக்கிறது. பக்கம் தரவுத்தளத்திலிருந்து உருவாக்கப்படும் போது, அது img> இல் உள்ள எந்தவொரு குறிப்பையும் மாற்றி அவற்றை படக் குறியீட்டுடன் மாற்றுகிறது.
அடிப்படை
- நீங்கள் உண்மையில் ஒரு படத்தை சேர்க்க வேண்டுமா என்று சிந்தியுங்கள். படத்தின் முக்கிய உள்ளடக்கமா, அல்லது அது அலங்காரமா? ஒரு குறைவான படம் வேகமான சுமை நேரத்தைக் குறிக்கும்
- ImageOptim ஐப் பயன்படுத்தி நீங்கள் சேர்க்க வேண்டிய படங்களை மேம்படுத்தவும்
- உங்கள் சேவையகம் அல்லது .htaccess கோப்பில் உங்கள் படங்களுக்கான காலாவதியான தலைப்புகளை அமைக்கவும் (‘செயல்திறன்’ இன் கீழ் விவரங்களைக் காண்க)
- பிக்சர்ஃபில் படங்களுக்கு பாலிஃபில் ஆதரவை வழங்குகிறது
மேம்படுத்தபட்ட
- சோம்பேறி jQuery இன் சோம்பேறி சுமை சொருகி பயன்படுத்தி உங்கள் படங்களை ஏற்றவும்
- அம்சத்தைக் கண்டறிவதற்கு HTMLImageElement.Sizes மற்றும் HTMLPicturesElement ஐப் பயன்படுத்தவும்.
- கிதுபில் காணப்படும் மேம்பட்ட பிக்சர்ஃபில் WP சொருகி, தனிப்பயன் பட அகலங்கள் மற்றும் அளவுகள் மதிப்புகளை வரையறுக்க உங்களை அனுமதிக்கும்
செயல்திறன்
எங்கள் பக்கங்களில் விரைவாக உணரப்பட்ட செயல்திறனைப் பெற, சேவையகத்தின் முதல் பதிலுக்குள் எங்கள் பக்கத்தின் மேல் பகுதியை வழங்க தேவையான அனைத்து HTML மற்றும் CSS தேவை. அந்த மேஜிக் எண் 14 கி.பை ஆகும், இது முதல் சுற்று-பயண நேரத்திற்குள் (ஆர்.டி.டி) அதிகபட்ச நெரிசல் சாளர அளவை அடிப்படையாகக் கொண்டது.
பேட்ரிக் ஹமான், கார்டியனில் தொழில்நுட்ப முன்னணி, மற்றும் அவரது குழுவினர் ஃபிரான்டென்ட் மற்றும் பின்தளத்தில் நுட்பங்களின் கலவையைப் பயன்படுத்தி 1000 மீட்டர் தடையை உடைக்க முடிந்தது. கார்டியனின் அணுகுமுறை தேவையான உள்ளடக்கத்தை - கட்டுரை - பயனருக்கு விரைவாகவும் 14kb மேஜிக் எண்ணிலும் வழங்கப்படுவதை உறுதி செய்வதாகும்.
செயல்முறையைப் பார்ப்போம்:
- ஒரு செய்திக்கான கூகிள் இணைப்பில் பயனர் கிளிக் செய்க
- கட்டுரைக்கு ஒரு தடுப்பு கோரிக்கை தரவுத்தளத்திற்கு அனுப்பப்படுகிறது. தொடர்புடைய கதைகள் அல்லது கருத்துகள் எதுவும் கோரப்படவில்லை
- சிக்கலான CSS கொண்ட HTML ஏற்றப்பட்டுள்ளது
- தலையில்>
- ‘கடுகு வெட்டு’ செயல்முறை மேற்கொள்ளப்பட்டு பயனரின் சாதன அம்சங்களின் அடிப்படையில் எந்த நிபந்தனை கூறுகளும் ஏற்றப்படும்
- கட்டுரையுடன் தொடர்புடைய அல்லது ஆதரிக்கும் எந்தவொரு உள்ளடக்கமும் (தொடர்புடைய கட்டுரை படங்கள், கட்டுரை கருத்துகள் மற்றும் பல) சோம்பேறிகளாக ஏற்றப்படுகின்றன
இது போன்ற முக்கியமான ரெண்டரிங் பாதையை மேம்படுத்துவது என்பது தலை> 222 கோடுகள் நீளமானது. இருப்பினும், பயனர் பார்க்க வேண்டிய முக்கியமான உள்ளடக்கம் இன்னும் 14 கி.பை. இந்த செயல்முறையே 1000 மீட்டர் ரெண்டரிங் தடையை உடைக்க உதவுகிறது.
நிபந்தனை மற்றும் சோம்பேறி ஏற்றுதல்
நிபந்தனை ஏற்றுதல் பயனரின் சாதன அம்சத்தின் அடிப்படையில் அனுபவத்தை மேம்படுத்துகிறது. நவீனமயமாக்கல் போன்ற கருவிகள் இந்த அம்சங்களை சோதிக்க உங்களை அனுமதிக்கின்றன, ஆனால் ஒரு உலாவி ஆதரவை வழங்குகிறது என்று கூறுவதால், அது எப்போதும் முழு ஆதரவைக் குறிக்காது என்பதை அறிந்து கொள்ளுங்கள்.
ஒரு நுட்பம் என்னவென்றால், பயனர் அந்த அம்சத்தைப் பயன்படுத்துவதற்கான நோக்கத்தைக் காண்பிக்கும் வரை எதையாவது ஏற்றுவதை நிறுத்தி வைப்பது. இது நிபந்தனையாகக் கருதப்படும். பயனர் ஐகான்களைத் தொட்டுக் கொள்ளும் வரை அல்லது தொடும் வரை நீங்கள் சமூக ஐகான்களில் ஏற்றுவதை நிறுத்தி வைக்கலாம் அல்லது ஒரு பிரத்யேக மேப்பிங் பயன்பாட்டுடன் இணைக்க பயனர் விரும்பும் சிறிய காட்சிப்பகுதிகளில் ஒரு ஐஃப்ரேம் கூகிள் மேப்பை ஏற்றுவதைத் தவிர்க்கலாம். மற்றொரு அணுகுமுறை ‘கடுகு வெட்டு’ - இது குறித்த விவரங்களுக்கு மேலே உள்ள பாக்ஸ்அவுட்டைப் பார்க்கவும்.
சோம்பேறி ஏற்றுதல் என்பது நீங்கள் எப்போதும் பக்கத்தில் ஏற்ற விரும்பும் ஒன்று - கட்டுரையின் ஒரு பகுதியாக இருக்கும் படங்கள், கருத்துகள் அல்லது பிற தொடர்புடைய கட்டுரைகள் - ஆனால் பயனர் உள்ளடக்கத்தை நுகரத் தொடங்க அங்கு இருக்க வேண்டிய அவசியமில்லை.
அடிப்படை
- கோப்புகளுக்கான gzipping ஐ இயக்கவும் மற்றும் அனைத்து நிலையான உள்ளடக்கங்களுக்கும் காலாவதியான தலைப்புகளை அமைக்கவும் (netm.ag/expire-260)
- சோம்பேறி சுமை jQuery சொருகி பயன்படுத்தவும். இது காட்சியகத்தை அணுகும்போது அல்லது ஒரு குறிப்பிட்ட காலத்திற்குப் பிறகு படங்களை ஏற்றும்
மேம்படுத்தபட்ட
- வேகமாக அல்லது கிளவுட்ஃப்ளேரை அமைக்கவும். உள்ளடக்க விநியோக நெட்வொர்க்குகள் (சி.டி.என்) உங்கள் நிலையான சேவையை உங்கள் சொந்த சேவையகத்தை விட விரைவாக பயனர்களுக்கு வழங்குகின்றன, மேலும் சில இலவச அடுக்குகளைக் கொண்டுள்ளன
- இணையான http கோரிக்கைகள் போன்ற http2 அம்சங்களைப் பயன்படுத்த http2- இயக்கப்பட்ட உலாவிகளுக்கு SPDY ஐ இயக்கவும்
- உங்கள் சமூக சின்னங்களை நிபந்தனையுடன் ஏற்றுவதற்கு சமூக எண்ணிக்கை அனுமதிக்கிறது
- நிலையான வரைபட API ஐப் பயன்படுத்துவது படங்களுக்கான ஊடாடும் Google வரைபடங்களை மாற்ற உங்களை அனுமதிக்கும். Netm.ag/static-260 இல் பிராட் ஃப்ரோஸ்டின் உதாரணத்தைப் பாருங்கள்
- அஜாக்ஸ் உள்ளடக்கு முறை ஒரு தரவு-முன், தரவு-பின் அல்லது தரவு-மாற்று பண்புக்கூறு ஆகியவற்றிலிருந்து உள்ளடக்க துணுக்குகளை ஏற்றும்
பொறுப்பு அச்சுக்கலை
அச்சுக்கலை என்பது உங்கள் உள்ளடக்கத்தை ஜீரணிக்க எளிதாக்குகிறது. பலவகையான சாதனங்கள் மற்றும் காட்சிப்பகுதிகளில் வாசிப்புத்திறனை உறுதிப்படுத்த பொறுப்பு அச்சுக்கலை இதை விரிவுபடுத்துகிறது. ஜோர்டான் மூர் அந்த வகை ஒரு விஷயத்தை ஒப்புக்கொள்கிறார். உங்களுக்குத் தேவைப்பட்டால் ஒரு படத்தை அல்லது இரண்டை விடுங்கள், ஆனால் உங்களிடம் சிறந்த வகை இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
ஒவ்வொரு உலாவி அல்லது சாதன உற்பத்தியாளரும் ஒரு குறிப்பிட்ட தீர்மானம் அல்லது சாதனத்திற்கு நியாயமான முறையில் படிக்கக்கூடிய இயல்புநிலையை உருவாக்குவதால், HTML எழுத்துரு அளவை 100 சதவீதமாக அமைக்க ஸ்டீபன் ஹே அறிவுறுத்துகிறார் (படிக்க: அதை அப்படியே விட்டுவிடுங்கள்). பெரும்பாலான டெஸ்க்டாப் உலாவிகளுக்கு இது 16px ஆகும்.
மறுபுறம், மூர் சில உள்ளடக்க கூறுகளுக்கு குறைந்தபட்ச எழுத்துரு அளவை அமைக்க REM அலகு மற்றும் HTML எழுத்துரு அளவைப் பயன்படுத்துகிறார். எடுத்துக்காட்டாக, ஒரு கட்டுரையின் பைலைன் எப்போதும் 14px ஆக இருக்க விரும்பினால், அதை HTML உறுப்பு மீது அடிப்படை எழுத்துரு அளவாக அமைத்து .பைலைன் {font-size: 1rem; set ஐ அமைக்கவும். நீங்கள் உடலை அளவிடுகையில்: எழுத்துரு-அளவு: காட்சியமைப்புக்கு ஏற்றவாறு .by-line பாணியை நீங்கள் பாதிக்க மாட்டீர்கள்.
ஒரு நல்ல வாசிப்பு வரி நீளமும் முக்கியமானது - 45 முதல் 65 எழுத்துகளுக்கு நோக்கம். உங்கள் உள்ளடக்கத்தை சரிபார்க்க நீங்கள் பயன்படுத்தக்கூடிய புக்மார்க்கெட் உள்ளது. உங்கள் வடிவமைப்பில் பல மொழிகளை ஆதரிக்கிறீர்கள் என்றால், வரி நீளமும் மாறுபடலாம். மூர் இதைப் பயன்படுத்த அறிவுறுத்துகிறார்: லாங் (டி) கட்டுரை {அதிகபட்ச அகலம்: 30em there அங்குள்ள எந்தவொரு சிக்கலையும் மறைக்க.
செங்குத்து தாளத்தை பராமரிக்க, உள்ளடக்கத் தொகுதிகள், உல்>, ஓல்>, பிளாக்வோட்>, டேபிள்>, பிளாக்வோட்> மற்றும் பலவற்றிற்கு எதிராக விளிம்பு-அடிப்பகுதியை உங்கள் வரி-உயரத்திற்கு அமைக்கவும். படங்களை அறிமுகப்படுத்துவதில் தாளத்திற்கு இடையூறு ஏற்பட்டால், நீங்கள் Baseline.js அல்லது BaselineAlign.js ஐ சேர்ப்பதன் மூலம் அதை சரிசெய்யலாம்.
அடிப்படை
- உங்கள் எழுத்துருவை 100 சதவீத உடலில் அடிப்படையாகக் கொள்ளுங்கள்
- உறவினர் எம் அலகுகளில் வேலை செய்யுங்கள்
- உங்கள் வடிவமைப்பில் செங்குத்து தாளத்தை பராமரிக்க உங்கள் விளிம்புகளை உங்கள் வரி உயரத்திற்கு அமைக்கவும்
மேம்படுத்தபட்ட
- Enhance.js அல்லது ஒத்திவைக்கப்பட்ட எழுத்துரு ஏற்றுதல் மூலம் எழுத்துரு ஏற்றுதல் செயல்திறனை மேம்படுத்தவும்
- சொற்பொருள் தலைப்புகளுக்கு சாஸ் @ அடங்கும்.
- பெரும்பாலும் நாம் ஒரு பக்கப்பட்டி விட்ஜெட்டில் h2 மார்க்அப் தேவைப்படும் h5 பாணியைப் பயன்படுத்த வேண்டும். அளவைக் கட்டுப்படுத்த தாடிஸின் அச்சுக்கலை மிக்ஸின்களைப் பயன்படுத்தவும், கீழேயுள்ள குறியீட்டைக் கொண்டு சொற்பொருளாக இருக்கவும்:
.சைட்பார் h2 head head தலைப்பு -5 ஐச் சேர்க்கவும்
ஜாவாஸ்கிரிப்டில் ஊடக வினவல்கள்
ஊடக வினவல்கள் மூலம் பலவிதமான காட்சிப்பகுதிகளில் தளவமைப்பைக் கட்டுப்படுத்த முடிந்ததிலிருந்து, எங்கள் ஜாவாஸ்கிரிப்டையும் இயக்குவதற்கு ஒரு வழியைத் தேடுகிறோம். ஜாவாஸ்கிரிப்டை சில வியூபோர்ட் அகலங்கள், உயரங்கள் மற்றும் நோக்குநிலைகளில் சுட சில வழிகள் உள்ளன, மேலும் சில ஸ்மார்ட் நபர்கள் என்குவேர்.ஜெஸ் மற்றும் சிம்பிள் ஸ்டேட் மேனேஜர் போன்ற சுலபமாக பயன்படுத்தக்கூடிய சொந்த JS செருகுநிரல்களை எழுதியுள்ளனர். மேட்ச் மீடியாவைப் பயன்படுத்தி இதை நீங்களே உருவாக்கலாம். இருப்பினும், உங்கள் ஊடக வினவல்களை உங்கள் CSS மற்றும் ஜாவாஸ்கிரிப்ட்டில் நகலெடுக்க வேண்டிய பிரச்சினை உங்களுக்கு உள்ளது.
ஆரோன் குஸ்டாஃப்சனுக்கு ஒரு சுத்தமான தந்திரம் உள்ளது, அதாவது உங்கள் CSS மற்றும் உங்கள் JS இல் உங்கள் ஊடக வினவல்களை நிர்வகிக்க வேண்டும் மற்றும் பொருத்த வேண்டியதில்லை. இந்த யோசனை முதலில் ஜெர்மி கீத்திடமிருந்து வந்தது, இந்த எடுத்துக்காட்டில் குஸ்டாஃப்சன் அதை ஒரு முழு செயல்படுத்தலுக்கு கொண்டு சென்றுள்ளார்.
GetActiveMQ (netm.ag/media-260) ஐப் பயன்படுத்தி, உடல் உறுப்பு முடிவில் div # getActiveMQ- வாட்சரை செலுத்தி அதை மறைக்கவும். CSS தொகுப்பிற்குள் # getActiveMQ-watchcher {font-family: break-0; media முதல் ஊடக வினவலுக்கு, எழுத்துரு-குடும்பம்: break-1; இரண்டாவது, எழுத்துரு-குடும்பம்: முறிவு -2; மூன்றாவது மற்றும் பல.
ஸ்கிரிப்ட் வாட்ச்போர்ட்டின் அளவு மாறிவிட்டதா என்பதைச் சரிபார்க்க வாட்ச்ரேசைஸ் () (netm.ag/resize-260) ஐப் பயன்படுத்துகிறது, பின்னர் செயலில் உள்ள எழுத்துரு-குடும்பத்தை மீண்டும் படிக்கிறது. காட்சிப்படுத்தல் அனுமதிக்கும் போது, ஒரு லைட்பாக்ஸின் நடத்தை மாற்றுவது அல்லது தரவு அட்டவணையின் தளவமைப்பைப் புதுப்பிப்பது போன்ற ஒரு தாவலாக்கப்பட்ட இடைமுகத்தை ஒரு dl> இல் சேர்ப்பது போன்ற JS மேம்பாடுகளை இப்போது நீங்கள் பயன்படுத்தலாம். Netm.ag/active-260 இல் getActiveMQ கோடெபனைப் பாருங்கள்.
அடிப்படை
- வெவ்வேறு பார்வைக்கு ஜாவாஸ்கிரிப்ட் பற்றி மறந்து விடுங்கள். உள்ளடக்கம் மற்றும் வலைத்தள செயல்பாடுகளை பயனர்கள் எல்லா காட்சிகளிலும் அணுகக்கூடிய வகையில் அவர்களுக்கு வழங்கவும். எங்களுக்கு ஒருபோதும் ஜாவாஸ்கிரிப்ட் தேவையில்லை
மேம்படுத்தபட்ட
- மீடியா வினவல்களின் முன் வரையறுக்கப்பட்ட பட்டியலாக பிரேக்அப்பைப் பயன்படுத்துவதன் மூலமும், getActiveMQ- வாட்சருக்கு எழுத்துரு குடும்பங்களின் பட்டியலை உருவாக்குவதை தானியக்கமாக்குவதன் மூலமும் கஸ்டாஃப்சனின் முறையை விரிவாக்குங்கள்.
முற்போக்கான விரிவாக்கம்
முற்போக்கான மேம்பாட்டைப் பற்றிய பொதுவான தவறான கருத்து என்னவென்றால், ‘ஓ, இந்த புதிய அம்சத்தை என்னால் பயன்படுத்த முடியாது’ என்று மக்கள் நினைக்கிறார்கள், ஆனால் உண்மையில் இது நேர்மாறானது. முற்போக்கான மேம்பாடு என்பது ஒரு அம்சத்தை ஒன்று அல்லது உலாவிகளில் மட்டுமே ஆதரித்தால் மட்டுமே நீங்கள் வழங்க முடியும், மேலும் காலப்போக்கில் புதிய பதிப்புகள் வருவதால் மக்கள் சிறந்த அனுபவத்தைப் பெறுவார்கள்.
எந்தவொரு வலைத்தளத்தின் முக்கிய செயல்பாட்டையும் நீங்கள் பார்த்தால், நீங்கள் அதை HTML ஆக வழங்கலாம் மற்றும் சேவையக பக்கமானது அனைத்து செயலாக்கத்தையும் செய்ய முடியும். கொடுப்பனவுகள், படிவங்கள், விருப்பங்கள், பகிர்வு, மின்னஞ்சல்கள், டாஷ்போர்டுகள் - இவை அனைத்தையும் செய்ய முடியும். அடிப்படை பணி கட்டப்பட்டவுடன், அதன் மேல் அற்புதமான தொழில்நுட்பங்களை அடுக்கலாம், ஏனென்றால் அந்தவற்றைப் பிடிக்க ஒரு பாதுகாப்பு வலை உள்ளது. நாம் இங்கு பேசிய மேம்பட்ட அணுகுமுறைகளில் பெரும்பாலானவை முற்போக்கான மேம்பாட்டை அடிப்படையாகக் கொண்டவை.
தளவமைப்பு
நெகிழ்வான தளவமைப்பு சொல்வது எளிது, ஆனால் இது பலவிதமான அணுகுமுறைகளைக் கொண்டுள்ளது. இதைப் பயன்படுத்தி குறைந்த மார்க்அப் மூலம் எளிய கட்டம் தளவமைப்புகளை உருவாக்கவும்: nth-child () தேர்வாளர்.
/ * கட்டத்திற்கான மொபைல் முதல் அகலத்தை அறிவிக்கவும் * / .கிரிட் -1-4 {மிதவை: இடது; அகலம்: 100%; } / * காட்சியமைப்பு குறைந்தபட்சம் 37.5em ஆக இருக்கும்போது, ஒரு உறுப்புக்கு கட்டத்தை 50% ஆக அமைக்கவும் * / @ மீடியா (குறைந்தபட்ச அகலம்: 37.5em) {.கிரிட் -1-4 {அகலம்: 50%; } / * முதல் ஒவ்வொரு உறுப்புக்கும் பின் மிதவை அழிக்கவும். இது 3 வது, 5 வது, 7 வது, 9 வது ... கட்டத்தில் குறிவைக்கிறது. * /. கிரிட் -1-4: nth-of-type (2n + 1) {clear: left; @} @ மீடியா (நிமிடம்-அகலம்: 64 எம்) {.கிரிட் -1-4 {அகலம்: 25%; } / * முந்தைய தெளிவானதை அகற்று * / .கிரிட் -1-4: nth-of-type (2n + 1) {clear: none; 4 / * முதல் 4 வது உறுப்புக்குப் பிறகு மிதவை அழிக்கவும். இது 5 வது, 9 வது ... கட்டத்தில் குறிவைக்கிறது. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
உங்கள் தளவமைப்புகளுக்கு நிலையைப் பயன்படுத்தவும், மிதக்கவும் விடைபெறுங்கள். இன்றுவரை அவர்கள் எங்களுக்குச் சிறப்பாகச் சேவை செய்திருந்தாலும், தளவமைப்பிற்கான அவற்றின் பயன்பாடு அவசியமான ஹேக் ஆகும். எங்கள் தளவமைப்பு துயரங்களை சரிசெய்ய உதவும் இரண்டு புதிய குழந்தைகளை இப்போது நாங்கள் பெற்றுள்ளோம் - ஃப்ளெக்ஸ் பாக்ஸ் மற்றும் கட்டங்கள்.
தனிப்பட்ட தொகுதிகளுக்கு ஃப்ளெக்ஸ் பாக்ஸ் சிறந்தது, ஒவ்வொரு தொகுதிக்குள்ளும் உள்ளடக்கத்தின் துண்டுகளின் அமைப்பைக் கட்டுப்படுத்துகிறது. ஃப்ளெக்ஸ் பாக்ஸைப் பயன்படுத்தி எளிதாக அடையக்கூடிய தளவமைப்புகள் உள்ளன, மேலும் இது பதிலளிக்கக்கூடிய தளங்களுடன் இன்னும் உண்மை. இதைப் பற்றி மேலும் அறிய, ஃப்ளெக்ஸ் பாக்ஸ் அல்லது ஃப்ளெக்ஸ் பாக்ஸ் பாலிஃபில்லுக்கான சிஎஸ்எஸ் தந்திரங்களின் வழிகாட்டியைப் பாருங்கள்.
CSS கட்டம் தளவமைப்பு
மேக்ரோ நிலை தளவமைப்புக்கு கட்டம் அதிகம். உங்கள் CSS க்குள் உங்கள் தளவமைப்பை விவரிக்க கட்டம் தளவமைப்பு தொகுதி உங்களுக்கு சிறந்த வழியை வழங்குகிறது. இந்த நேரத்தில் அது வரைவு நிலையில் இருக்கும்போது, ரேச்சல் ஆண்ட்ரூ எழுதிய CSS கட்ட கட்டமைப்பில் இந்த கட்டுரையை பரிந்துரைக்கிறேன்.
இறுதியாக
உங்கள் பதிலளிக்கக்கூடிய நடைமுறையை நீட்டிக்க சில குறிப்புகள் இவை. எந்தவொரு புதிய பதிலளிக்கக்கூடிய வேலையையும் அணுகும்போது, ஒரு படி பின்வாங்கி, அடிப்படைகளை நீங்கள் சரியாகப் பெறுவதை உறுதிசெய்க. உங்கள் உள்ளடக்கம், HTML மற்றும் அடுக்கு மேம்படுத்தப்பட்ட அனுபவங்களைத் தொடங்குங்கள், உங்கள் வடிவமைப்புகளை நீங்கள் எங்கு எடுக்கலாம் என்பதற்கு வரம்பு இருக்காது.
இந்த கட்டுரை முதலில் 260 இதழில் வெளிவந்தது நிகர இதழ்.
