பதிலளிக்கக்கூடிய வலை வடிவமைப்பிற்கான 50 அருமையான கருவிகள்

நூலாசிரியர்: Monica Porter
உருவாக்கிய தேதி: 17 மார்ச் 2021
புதுப்பிப்பு தேதி: 17 மே 2024
Anonim
பதிலளிக்கக்கூடிய வலை வடிவமைப்பிற்கான 50 அருமையான கருவிகள் - படைப்பு
பதிலளிக்கக்கூடிய வலை வடிவமைப்பிற்கான 50 அருமையான கருவிகள் - படைப்பு

உள்ளடக்கம்

ஈதன் மார்கோட் தனது "பொறுப்பு வலை வடிவமைப்பு" மற்றும் அவரது சிறந்த விற்பனையான புத்தகம் ஆகிய இரண்டிலும் அறிமுகப்படுத்திய / உருவாக்கியதைப் போல, ஒரு தளத்தை பதிலளிக்க ஒருவருக்கு மூன்று கூறுகள் தேவை:

  1. ஒரு நெகிழ்வான / திரவ கட்டம்
  2. பதிலளிக்கக்கூடிய படங்கள்
  3. ஊடக வினவல்கள்

பதிலளிக்கக்கூடிய வலை வடிவமைப்பு தொடர்பான நோக்கங்கள், கருத்துகள் மற்றும் நுட்பங்களை உள்ளடக்கிய பிற சிறந்த கட்டுரைகள் ஏராளமாக உள்ளன, எனவே இந்த கட்டுரையின் கவனத்தை பொறுப்புடன் பதிலளிக்க உங்களுக்கு உதவும் சில சிறந்த கருவிகளில் வைத்திருப்போம்.

தொடங்குவதற்கான கருவிகள்

உங்கள் தளத்தை உருவாக்கத் தொடங்குவதற்கு முன், பக்கத்தின் கூறுகள் அவை பார்க்கப்படும் பல்வேறு சாதனங்களின் வெவ்வேறு உலாவி அளவுகளுக்கு ஏற்றவாறு எவ்வாறு பொருந்துகின்றன என்பதை வரையவும், முதன்மையாக சிந்திப்பதன் மூலம் அடிக்கடி துண்டிக்கப்படுவதைத் தவிர்க்கவும் சிறந்தது. டெஸ்க்டாப் வடிவமைப்பு மற்றும் மீதமுள்ள பதிலளிக்கக்கூடிய மறு செய்கைகள் பின் சிந்தனையாக (குறிப்பாக ஸ்டீபனி (சல்லிவன்) ரெவிஸின் கருத்தைப் பார்க்கவும்).

01. பொறுப்பு வலை வடிவமைப்பு ஸ்கெட்ச் தாள்கள்

ஜெர்மி பி ஆல்போர்டின் இந்த பதிலளிக்கக்கூடிய ஸ்கெட்ச் தாள்கள், வெவ்வேறு பிரிவுகளில் பக்க பிரிவுகள் எவ்வாறு மாறும் என்பதை மேப்பிங் செய்யத் தொடங்குவதற்கான சிறந்த தொடக்க புள்ளியாகும்.


02. பொறுப்பு வடிவமைப்பு ஸ்கெட்ச்புக்

உங்கள் ஓவியங்கள் அனைத்தையும் ஒரே இடத்தில் வைக்க விரும்பினால், பயன்பாட்டு ஸ்கெட்ச்புக் நிறுவனத்தால் பதிலளிக்கக்கூடிய 50 ஸ்கெட்ச் தாள்களின் இந்த கம்பி-கட்டுப்பட்ட புத்தகத்தை நீங்கள் பரிசீலிக்க விரும்பலாம்.

03. பொறுப்பு வயர்ஃப்ரேம்கள்

பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்குவதில் உள்ள சிரமங்களில் ஒன்று, பதிலளிக்கக்கூடிய வடிவமைப்பு எவ்வாறு செயல்படும் என்பதைக் காட்ட வயர்ஃப்ரேம்களைப் பயன்படுத்துவதாகும். அடோப்பின் ஜேம்ஸ் மெல்லர்ஸ் இந்த சோதனைக் கருவியை ஒன்றிணைத்து சிக்கலான தளவமைப்புகளின் வயர் ஃப்ரேமிங் எவ்வாறு செயல்பட முடியும் என்பதைக் காட்டுகிறது.


04. பல சாதன தளவமைப்பு வடிவங்கள்

பதிலளிக்கக்கூடிய வடிவமைப்பைத் திட்டமிடும்போது, ​​மற்றவர்கள் அதை உங்களுக்கு முன் எவ்வாறு அணுகியுள்ளார்கள் என்பதைப் பார்ப்பது பயனுள்ளதாக இருக்கும், எனவே லூக் வ்ரோப்லெவ்ஸ்கியின் மல்டி-டிவைஸ் லேஅவுட் பேட்டர்ன்ஸ், பிரபலமான வடிவங்களை எடுத்துக்காட்டுகளுக்கான இணைப்புகளுடன் பட்டியலிடுகிறது, தொடங்குவதற்கு இது ஒரு சிறந்த இடம்.

05. உடை ஓடுகள்

சமநாத வாரனின் ஸ்டைல் ​​டைல்ஸ் பதிலளிக்கக்கூடிய வயதில் வடிவமைப்பிற்கான ஒரு புதிய நுட்பத்தை முன்மொழிகிறது; நிலையான அகல வடிவமைப்பு மொக்கப்களைக் காட்டிலும், இவை ஸ்வாட்சுகள் அல்லது மூட் போர்டுகள் போன்றவை, அவை பொதுவான வடிவமைப்பு அணுகுமுறையை சிறுமணி விவரங்களுக்குச் செல்லாமல் காட்டுகின்றன.

நெகிழ்வான / திரவ கட்டத்திற்கான கருவிகள்

முன்னர் கூறியது போல, பதிலளிக்கக்கூடிய வடிவமைப்பிற்கு தேவையான முதல் கூறு ஒரு நெகிழ்வான / திரவ கட்டமாகும்.பின்வருபவை ஏற்கனவே முன்பே கட்டமைக்கப்பட்டவை: நீங்கள் அவற்றைப் பதிவிறக்க வேண்டும், மேலும் விரைவாக பதிலளிக்கக்கூடிய தளத்திற்கான பாதையில் செல்வீர்கள்.


06. கோல்டன் கிரிட் சிஸ்டம்

குறைந்த கட்டமைப்பை உருவாக்கிய ஜோனி கோர்பி, பதிலளிக்கக்கூடிய வடிவமைப்பிற்காக நம்பகமான கட்டம் அமைப்பின் இந்த புதிய பதிப்பை சமீபத்தில் வெளியிட்டார். 16, எட்டு, நான்கு நெடுவரிசைகளுக்கு எளிதில் மாற்றியமைப்பதால் "மடிப்பு" என்று கருதப்படும் கோல்டன் கிரிட் சிஸ்டம் ஒரு சிறிய உலாவி மேலடுக்கையும் கொண்டுள்ளது, இது உங்கள் பக்கங்களில் உள்ள கட்டத்தை சோதனைக்கு வெளிப்படுத்துகிறது.

07. மடிப்பு 960

பரவெல், இன்க். இல் உள்ள திறமையான ஏஜெண்டுகள் மாற்றியமைக்கப்பட்ட 960.gs கட்டத்தை வெளியிட்டுள்ளன, அவை அவற்றின் பதிலளிக்கக்கூடிய திட்டங்களுக்கு அடிப்படையாகப் பயன்படுத்துகின்றன.

08. சிம்பிள் கிரிட்

கோனார் முயர்ஹெட் எழுதிய சிம்பிள் கிரிட், பதிலளிக்கக்கூடிய வகையில் கட்டப்பட்டது, எனவே உங்கள் பதிலளிக்கக்கூடிய வலைத்தள திட்டத்துடன் எழுந்து இயங்குவது எளிது.

09. 1140px CSS கட்டம்

மெல்போர்ன் வடிவமைப்பாளர் ஆண்டி டெய்லரின் 1140px சிஎஸ்எஸ் கட்டம் மற்றொரு சிறந்த பதிலளிக்கக்கூடிய கட்ட அமைப்பு ஆகும், இது ஒரு பரந்த டெஸ்க்டாப் தீர்மானத்திலிருந்து மொபைலுக்கு செல்கிறது.

10. நெடுவரிசை CSS கட்டம் அமைப்பு

பல்ப் + பிக்சல்கள் அல்லது கிரியேட்டிவ் டைரக்டர் நிக் கோர்ஸ்லைன் உருவாக்கிய நெடுவரிசை கட்டம் அமைப்பு 1140px கட்டம் அமைப்பை அடிப்படையாகக் கொண்டது, ஆனால் ஸ்கெட்ச்ஷீட்கள் மற்றும் வயர்ஃப்ரேமிங் வார்ப்புருக்கள் கொண்ட வடிவமைப்பு கிட், மற்றும் CSS பிழைத்திருத்த பாணிகள் போன்ற சில கூடுதல் நன்மைகளுடன்.

11. சொற்பொருள் கட்டம் அமைப்பு

முன்பே செயலாக்கப்பட்ட சிஎஸ்எஸ் நீட்டிப்புகள் சாஸ் மற்றும் லெஸ் போன்றவை மேலும் பிரபலமடைந்து வருகின்றன, மேலும் டைலர் டேட்டின் சொற்பொருள் கட்டம் அமைப்பு இந்த கட்டம் அமைப்பில் அதிகபட்ச விளைவுகளுக்கு அவற்றைப் பயன்படுத்துகிறது, இது தேவையற்ற வகுப்புகள் அல்லது கூறுகளைப் பயன்படுத்துவதாகக் கூறவில்லை. Coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ இல் மேலும் படிக்கவும்.

12. சுசி

சொற்பொருள் கட்டம் அமைப்பைப் போலவே ஓட்பேர்டின் SUSY கூடுதல் மார்க்அப் அல்லது சிறப்பு வகுப்புகளைப் பயன்படுத்தாத ஒரு கட்டம் அமைப்பை உருவாக்கியது, ஆனால் SUSY என்பது சாஸின் பயனர்களை மட்டுமே நோக்கமாகக் கொண்டுள்ளது (மற்றும் அதன் நீட்டிப்பு, திசைகாட்டி).

13. கிரிட்பாக்

எர்ஸ்கைன் டிசைனின் கிரிட்பாக், புதிய பதிலளிக்கக்கூடிய கட்டம் ஜெனரேட்டர்களில் ஒன்றாகும். இது பல நெடுவரிசைகளில் உங்கள் நெடுவரிசைகளையும் குழிகளையும் அமைக்க உங்களை அனுமதிக்கிறது, பின்னர் CSS, ஜாவாஸ்கிரிப்ட் மற்றும் பிஎன்ஜி கோப்புகளை வெளியிடுகிறது, எனவே உங்கள் முழு அணியும் ஒரே தொடக்க புள்ளியிலிருந்து செயல்படுகிறது.

14. கிரிட்ஸெட்

கிரிட்ஸெட் மீது இன்னும் கொஞ்சம் மர்மம் இருக்கிறது, இதை நான் எழுதும் நேரத்தில், அது இன்னும் வெளியிடப்படவில்லை. ஆனால் மார்க் போல்டன் டிசைனின் கருவி பெஸ்போக், பரிந்துரைக்கப்படாத, கட்டம் அமைப்புகள் மற்றும் உங்கள் கட்டங்களை ஆன்லைனில் சேமிக்கவும் நிர்வகிக்கவும் ஒரு வழியை உறுதியளிக்கிறது.

15. RWD க்கு சிறந்த ஃபோட்டோஷாப் கட்டம்

எலியட் ஜே ஸ்டாக்ஸ் பழைய 960px டி ஃபேக்டோ கிரிட் தரநிலையை கைவிட்டு அதற்கு பதிலாக 1000px தளத்திலிருந்து வேலை செய்ய முன்மொழிகிறது, இதனால் அனைத்து சதவீத கணக்கீடுகளும் எளிதாக வேலை செய்ய முடியும். நீங்கள் ஒப்புக்கொண்டால், அவர் உங்களுடன் பணியாற்றத் தொடங்க ஒரு PSD ஐ உருவாக்கியுள்ளார்.

16. திரவ கட்டங்கள்

உங்கள் வடிவமைப்பு மிகவும் சிறப்பு வாய்ந்தது மற்றும் உங்கள் சொந்த தனிப்பயன் கட்டத்தை உருவாக்க வேண்டும் என்றால், நீங்கள் .net விருதுகள் புத்திசாலித்தனமான புதுமுகம் பரிந்துரைக்கப்பட்ட ஹாரி ராபர்ட்ஸின் திரவ கட்டம் கால்குலேட்டரைக் கொண்டு செய்யலாம்.

17. பொறுப்பு கால்குலேட்டர்

சதவிகித கால்குலேட்டருக்கு மற்றொரு பிக்சல்கள், ஆனால் ஸ்டு ராப்சனின் இது உங்களுக்காக அனைத்து CSS விதிகளையும் உருவாக்குவதன் மூலம் மற்றவர்களை விட ஒரு படி மேலே செல்கிறது, அதாவது அவற்றை உங்கள் நடைதாள்களில் நகலெடுத்து ஒட்டலாம்.

பதிலளிக்கக்கூடிய படங்களுக்கான கருவிகள் (மற்றும் உரை)

பதிலளிக்கக்கூடிய வலை வடிவமைப்பின் மற்றொரு முக்கியமான கூறு திரவ படங்கள். திரவப் படங்களை அடைவதற்கான நுட்பம் நேரடியானது என்றாலும், வெவ்வேறு சாதனங்களுக்கான செயல்திறன் மற்றும் பக்க சுமைகளை மேம்படுத்துவது பதிலளிக்கக்கூடிய வலை வடிவமைப்பில் மிகப்பெரிய சவால்களில் ஒன்றாகத் தெரிகிறது. சிக்கலை அணுகுவதற்கான சில ஆதாரங்கள் இங்கே.

18. பொறுப்பு படங்கள்

திரை தெளிவுத்திறனை அடிப்படையாகக் கொண்டு சரியான அளவிலான படத்தை அனுப்ப ஃபிலிமென்ட் குழு ஒரு வழியை உருவாக்கியது. மொபைல்-முதல் படங்களுடனான இந்த சோதனை, பதிலளிக்கக்கூடிய மற்றும் பொறுப்புடன் அளவிடும், வெவ்வேறு அளவுகளில் இரண்டு படங்களைக் குறிக்க வேண்டும்.

19. தகவமைப்பு படங்கள்

தகவமைப்பு படங்களை உருவாக்க மாட் வில்காக்ஸ் பொறுப்பு படங்கள் கருவியில் இருந்து உத்வேகம் பெற்றார், இது கூடுதல் மார்க்அப் தேவையில்லாமல் பயனரின் சாதனத்திற்கு பொருத்தமான படங்களை வழங்க PHP மற்றும் ஒரு சிறிய ஜாவாஸ்கிரிப்ட் பயன்படுத்துகிறது.

20. செஞ்சா.யோ எஸ்.ஆர்.சி (முன்னர் டினிஸ்ர்க்)

சென்சா ஒரு கிளவுட் சேவையை வழங்குகிறது, இது ஹோஸ்ட் செய்யப்பட்ட படங்களின் உகந்த பதிப்புகளை சாதனத்தின் அளவிற்காக அனுப்புகிறது. இதை எவ்வாறு பயன்படுத்துவது என்பதை அறிய, docs.sencha.com/io/src/ ஐப் பார்க்கவும்.

21. ஃபிடெக்ஸ்ட்

பரவெல், இன்க் இன் மற்றொரு ரத்தினம் ஃபிடெக்ஸ்ட்.ஜெஸ் ஆகும், இது வடிவமைப்பு மற்றும் சாதனத்திற்கு தலைப்பு வலை வகையை பதிலளிக்கக்கூடிய ஒரு jQuery செருகுநிரல் ஆகும். விவரங்களுக்கு trentwalton.com/2011/05/10/fit-to-scale/ ஐப் பார்க்கவும்.

22. ஸ்லாப்டெக்ஸ்ட்

ஃபிடெக்ஸ்ட் மற்றும் ஸ்லாப் டைப் அல்காரிதம் ஆகியவற்றால் ஈர்க்கப்பட்டு, பிரையன் மெக்அலிஸ்டரின் ஸ்லாப் டெக்ஸ்ட் என்பது ஒரு jQuery செருகுநிரலாகும், இது வரையறுக்கப்பட்ட அகலத்தை வைத்திருக்கும்போது பதிலளிக்கக்கூடிய அளவை மாற்றும் தைரியமான உரைகளை உருவாக்குகிறது.

ஊடக வினவல்களுக்கான கருவிகள்

வெவ்வேறு சாதனங்கள், திரவ கட்டம் மற்றும் திரவப் படங்களுக்கு உங்கள் தளவமைப்பு எவ்வாறு மாறப்போகிறது என்பது குறித்த ஒரு யோசனை இப்போது உங்களுக்கு உள்ளது, பக்கத்தின் கூறுகளை பதிலளிக்கக்கூடிய நிலைக்கு மாற்ற உங்களுக்கு ஊடக வினவல்கள் தேவை.

23. Response.js

பதிலளிக்கக்கூடிய வடிவமைப்பில் உள்ள ஒரு சிக்கல் என்னவென்றால், ஊடக வினவல்களைப் படிக்க முடியாத உலாவிகள் பின்னால் விடப்படுகின்றன. இது உங்கள் இலக்கு பார்வையாளர்களுக்கு ஒரு பிரச்சினையாக இருக்காது, ஆனால் பழைய உலாவிகளில் பயனர்களுக்கு இடமளிப்பது இன்னும் நல்ல நடைமுறையாகும். Respond.js, ஸ்காட் ஜெல் எழுதியது, குறைந்தபட்ச அகலம் மற்றும் அதிகபட்ச அகலம் ஆகிய பண்புகளை மட்டுமே ஆதரிக்கிறது.

மேலும் விவரங்களுக்கு filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ ஐப் பார்க்கவும்.

24. CSS3-Mediaqueries.js

வூட்டர் வான் டெர் கிராஃப் எழுதிய CSS3-Mediaqueries.js, அனைத்து வகையான ஊடக வினவல்களையும் திறம்பட சோதித்துப் பயன்படுத்த IE மற்றும் பிற உலாவிகளின் பழைய பதிப்புகளை செயல்படுத்துகிறது.

25. Adapt.js

அசல் 960.gs கட்டம் அமைப்பின் ஆசிரியரான நாதன் ஸ்மித், Adapt.js ஐ எழுதியுள்ளார், இது உலாவி பரிமாணங்களைக் கண்டறிந்து தேவையான நடைதாள்களை மட்டுமே வழங்குகிறது - ஊடக வினவல்கள் போல ஆனால் ஊடக வினவல்கள் இல்லாமல், இது பழைய உலாவிகளில் கூட வேலை செய்கிறது.

26. வகைப்படுத்தி

இது எதிர் கோணத்திலிருந்து அணுகப்பட்ட சாதனக் கண்டறிதல் - டெஸ்க்டாப் அல்லது டேப்லெட்டாக கண்டறியப்படாவிட்டால் சாதனங்கள் மொபைல் என்று பிரட் ஜான்கோர்டின் வகைப்படுத்தி ஸ்கிரிப்ட் கருதுகிறது, இது உலாவிகளுக்கு வளங்களை அனுதாபத்துடன் வழங்க உதவுகிறது.

பொறுப்பு வடிவமைப்பு (மற்றும் மொபைல்) கொதிகலன்கள்

திறமையான பதிலளிக்கக்கூடிய பணிப்பாய்வுகளின் உணர்வில், பாய்லர்ப்ளேட்டுகள் வடிவமைப்புகளை உலாவிக்கு விரைவாக நகர்த்துவதை எளிதாக்குகின்றன. இந்த கொதிகலன்களில் பெரும்பாலானவை மேலே குறிப்பிட்டுள்ள சிறந்த கருவிகளை ஒரு நேர்த்தியான தொகுப்பாக இணைக்கின்றன: ஸ்கிரிப்டுகளுடன் மேம்படுத்தப்பட்ட ஒரு நெகிழ்வான கட்டம், மொபைலை முதலில் செயல்படுத்தும் போது, ​​உள்ளடக்கத்தை வெளியேற்றும் தத்துவங்களை.

27. 320 மற்றும் அதற்கு மேல்

ஆண்டி கிளார்க்கின் 320 மற்றும் அதற்கு மேற்பட்டவை மொபைல்-முதல் கொதிகலன் ஆகும், இது குறைந்த மற்றும் பூட்ஸ்டார்ப் போன்ற பல நவீன வலை வடிவமைப்பு கருவிகளுடன் ஒருங்கிணைக்கிறது (பார்க்க # 30). ஒரு தளத்தை விரைவாக இயக்குவதற்கு இது ஒரு ஒளி மற்றும் சுறுசுறுப்பான வழி. ஆண்டி உடனான எங்கள் நேர்காணலையும் பாருங்கள், அதில் அவர் புதிய பதிப்பைப் பற்றி மேலும் கூறுகிறார்.

28. கட்டம் இல்லாதது

கிரிட்லெஸ் என்பது ஒரு HTML5 மற்றும் CSS3 கொதிகலன் ஆகும், இது உங்கள் பதிலளிக்கக்கூடிய வடிவமைப்புகளுக்கு அடிப்படையாக செயல்பட முடியும், அச்சுக்கலை மற்றும் வேகவைத்த குறுக்கு உலாவி இணக்கத்தன்மை ஆகியவற்றில் கவனம் செலுத்துகிறது.

29. எலும்புக்கூடு

முந்தைய இரண்டு கொதிகலன்களைப் போலல்லாமல், அதன் தொடக்கப் புள்ளி மிகச்சிறிய தெளிவுத்திறனுடன் உள்ளது, டேவ் காமாச்சே உருவாக்கிய எலும்புக்கூடு மேம்பாட்டு கிட் 960.gs கட்டம் அமைப்பை அடிப்படையாகக் கொண்டது மற்றும் மொபைலுக்கான அளவுகள். டெவலப்பர்களுக்கு மேல் பாணியை உருவாக்க எலும்புக்கூடு ஒரு சிறந்த பாணி கட்டமைப்பைக் கொண்டுள்ளது.

30. பூட்ஸ்டார்ப்

ட்விட்டரால் கட்டப்பட்டது மற்றும் இப்போது திறந்த மூலமானது, பூட்ஸ்டார்ப் என்பது ஒரு தளத்தை ஆன்லைனில் விரைவாகப் பெறுவதற்கான ஒரு கட்டமைப்பும் தொடர் கூறுகளும் ஆகும், மேலும் பதிப்பு இரண்டின் படி அதன் அனைத்து முக்கிய பகுதிகளும் பதிலளிக்கக்கூடிய வகையில் செயல்படுகின்றன.

செருகுநிரல்கள், ஷிம்கள் மற்றும் பாலிஃபில்ஸ்

நவீன உலாவிகள் மற்றும் மென்பொருள்கள் பதிலளிக்கக்கூடியவையாக இருந்தாலும், சில நேரங்களில் ஒரு நிலையான அனுபவத்தை வழங்க கூடுதல் கருவிகளைப் பயன்படுத்த வேண்டும்.

31. பொறுப்பு சொருகி

மரியோஸ் லுப்ளின்ஸ்கி ஒரு வேர்ட்பிரஸ் செருகுநிரலை எழுதியுள்ளார், இது தற்போதைய WP கருப்பொருளை பதிலளிக்கக்கூடிய ஒன்றாக மாற்றுவதாக உறுதியளிக்கிறது. இந்த எழுத்தின் நேரமாக இது வெளியிடப்படாததால் இது எவ்வாறு இயங்குகிறது என்பது எனக்குத் தெரியவில்லை, ஆனால் அது அதன் வாக்குறுதியின்படி வாழ்ந்தால் அது மிகவும் பயனுள்ளதாக இருக்க வேண்டும்.

32. தூக்கியெறியுங்கள்

டெஸ்க்டாப் உலாவிகளில் உள்ளடக்க வழிதல் கையாளுதல் நன்றாக வேலை செய்கிறது, ஆனால் பழைய மொபைல் உலாவிகள் அதை சீரற்ற முறையில் கையாளுகின்றன. கடினமான ஃபிலிமெண்ட் குழுமத்தின் ஓவர் த்ரோ பாலிஃபில் சாதனங்கள் முழுவதும் சீரான அழகான சீரழிவைச் சேர்க்கிறது, இது அனைத்து மொபைல் பயனர்களுக்கும் சிறந்த அனுபவத்தைப் பெறுவதை உறுதி செய்கிறது.

33. மீடியா டேபிள்

மார்கோ பெகோராரோவின் jQuery சொருகி, மீடியா டேபிள், சிறிய திரை சாதனங்களில் பெரிய தரவு அட்டவணைகளை எவ்வாறு காண்பிப்பது, பதிலளிக்கக்கூடிய நெடுவரிசைகளை உருவாக்குவது மற்றும் பொருத்தமான இடத்தில் ஒரு நிகழ்ச்சி / மறை நிலைமாற்றத்தை எவ்வாறு சேர்ப்பது என்ற சிக்கலைச் சரிசெய்ய உங்களுக்கு உதவ, Respond.js உடன் செயல்படுகிறது.

"சோதனை, சோதனை: 1-2-3 ..."

பதிலளிக்கக்கூடிய பணிப்பாய்வுகளின் மற்றொரு அம்சம் உங்கள் இலக்கு சாதனங்கள் மற்றும் தீர்மானங்களை அறிந்து பின்னர் அவற்றில் சோதிக்க வேண்டும்.

34. மறுஅளவிடல் உலாவி

முன்பக்க டெவலப்பர் சென் லுவோவின் மறுஅளவிடுதல் உலாவி, உங்கள் உலாவி சாளரத்திற்கு பதிலளிக்கக்கூடிய வடிவமைக்கப்பட்ட பக்கங்களைச் சோதிக்க அல்லது உங்கள் தேவைகளுக்கு ஏற்ற ஒன்றைக் கண்டுபிடிக்க முடியாவிட்டால் புதிய முன்னமைவை உருவாக்க பல முன்னமைக்கப்பட்ட பரிமாணங்களைக் கொண்டுள்ளது.

35. பதிலளிக்கக்கூடிய

ரெமி ஷார்ப் என்பவரால் கட்டமைக்கப்பட்ட resizeMyBrowser, பதிலளிக்கக்கூடியது, உங்கள் பக்கங்களை ஒரு சாளரத்தில் ஏற்றுகிறது, அங்கு உங்கள் மீடியா வினவல்கள் எவ்வளவு சிறப்பாக துப்பாக்கிச் சூடு நடத்தப்படுகின்றன மற்றும் வடிவமைப்பில் இடைவெளிகள் எங்கே என்பதை தீர்மானிக்க அகலத்தையும் உயரத்தையும் சோதிக்க முடியும்.

36. பொறுப்பு வடிவமைப்பு சோதனை

வடிவமைப்பாளர் மற்றும் டெவலப்பர் மாட் கெர்ஸ்லியின் நம்பமுடியாத பயனுள்ள கருவி: பல்வேறு உலாவி அளவுகளில் இது எவ்வாறு வழங்கப்படுகிறது என்பதைக் காண உங்கள் பதிலளிக்கக்கூடிய தளத்தின் URL ஐ பொறுப்பு வடிவமைப்பு சோதனையில் உள்ளிடவும்.

37. பதிலளிப்பவர்

ஒரு URL ஐ உள்ளிடுக, பல பொதுவான சாதன அளவுகளில் - இரக்கமற்ற ரோபோ செயல்திறனுடன் இது எவ்வாறு காண்பிக்கப்படுகிறது என்பதை ரெஸ்பானினேட்டர் உங்களுக்குக் காண்பிக்கும். தமா பக்ஸ்லி மற்றும் ஆண்டி ஹோவி ஆகியோர் இதற்குக் காரணம்.

38. Responsive.is

மற்றொரு பக்க சாதன சாதன முன்மாதிரி, Responsive.is ஒரு URL ஐ தட்டச்சு செய்ய உங்களை அனுமதிக்கிறது, பின்னர் அதை வெவ்வேறு முன்னமைவுகளின் வரம்பிற்கு இடையில் விரைவாக மறுஅளவிடுகிறது. இது வரவிருக்கும் டைப் காஸ்ட் பயன்பாட்டின் பின்னால் உள்ள குழுவினரால் உருவாக்கப்பட்டது.

39. Screenqueri.es

இன்னும் ஒரு உலாவி பரிமாணக் கருவி, ஆனால் மந்தர் ஷிர்கேவிலிருந்து வரும் Screenqueri.es ஒரு விரிவான மொபைல் மற்றும் டேப்லெட் முன்னமைவுகளைக் கொண்டிருப்பதன் மூலம் தன்னை வேறுபடுத்துகிறது, அத்துடன் ஒரு கட்டம் மற்றும் ஆட்சியாளர்களை நன்றாக அளவிடுவதை எளிதாக்குகிறது.

40. ஆப்டஸ்

பல வரையறுக்கப்பட்ட அளவுகளில் தளங்களை சோதிப்பதற்கான மற்றொரு பயன்பாடு, ஆனால் ஆப்டஸ் மேக்-சொந்தமானது. இது மேக் ஆப் ஸ்டோர் மூலம் கிடைக்கிறது, மேலும் சொந்தமாக இருப்பது எளிதான ஸ்கிரீன் ஷாட்கள் மற்றும் ஆஃப்லைன் ஆதரவு போன்ற கூடுதல் அம்சங்களைக் கொண்டுவருகிறது.

41. பொறுப்பு வடிவமைப்பு புக்மார்க்கெட்

விக்டர் கூலன் மிகவும் எளிமையான ஆனால் பயனுள்ள புக்மார்க்கெட்டை உருவாக்கியுள்ளார்; எந்தவொரு வலைப்பக்கத்திலும் நீங்கள் அதை செயல்படுத்தும்போது, ​​அது ஒரு கருவிப்பட்டியைச் சேர்க்கிறது, இது நான்கு பொதுவான திரை பரிமாணங்களுக்கு இடையில் மாற அனுமதிக்கிறது, இதன் மூலம் உங்கள் தளம் வெவ்வேறு அளவுகளில் எவ்வாறு வழங்கப்படுகிறது என்பதைக் காணலாம்.

42. பொறுப்பு வடிவமைப்பு சோதனை புக்மார்க்கெட்

பெஞ்சமின் கீனின் இந்த புக்மார்க்கெட் உங்கள் சொந்த சாதன அளவுகளை வரையறுக்க அனுமதிப்பதன் மூலம் மேலும் தனிப்பயனாக்க அனுமதிக்கிறது, மேலும் நீங்கள் விரும்பும் பல அல்லது குறைவானவை. செயல்படுத்தப்படும்போது, ​​தேர்ந்தெடுக்கப்பட்ட அனைத்து அளவுகளிலும், எளிதாக ஒப்பிடுவதற்கு பக்கத்தை இது காட்டுகிறது.

43. ஸ்கிரீன்ஃபிளை

ஸ்கிரீன்ஃபிளை, க்யூர்க்டூல்ஸ், டெஸ்க்டாப், டேப்லெட், மொபைல் மற்றும் தொலைக்காட்சியில் வெவ்வேறு தீர்மானங்களில் ஒரு தளத்தை சோதிக்க உங்களை அனுமதிக்கிறது. டெஸ்க்டாப் சோதனை தற்போது சஃபாரிக்கு மட்டுமே வரையறுக்கப்பட்டுள்ளது, அதே நேரத்தில் டேப்லெட் மற்றும் மொபைல் சாதனங்கள் மற்றும் உலாவிகளுக்கு கூடுதல் விருப்பங்களைக் கொண்டுள்ளன. தொலைக்காட்சி ஓபராவுக்கு மட்டுமே.

44. மீடியா வினவல் காட்டி

உலாவியால் ஊடக வினவல் தூண்டப்படும்போது சோதிக்க தூய CSS வழியை ஜோஹன் புரூக் வழங்குகிறது. மீடியா வினவல் காட்டி வடிவமைப்பு உடைக்கும் புள்ளிகளுடன் சோதனை மற்றும் விளையாடுவதற்கான மற்றொரு நல்ல கருவியாகும்.

45. ஷிம்

RWD இயக்கத்தின் சுவரொட்டி சிறுவனான பாஸ்டன் குளோபின் மறுவடிவமைப்பில் பயன்படுத்தப்படும் கருவிகளில் ஒன்றான ஷிம் என்பது ஒரு Node.js பயன்பாடாகும், இது ஒரே வைஃபை நெட்வொர்க்கில் பல சாதனங்களில் வலைப்பக்கத்தை இயக்குகிறது, இது குறுக்கு சாதன சோதனையை மிகவும் எளிதாக்குகிறது .

46. ​​டிரைவ்-இன்

ஷிம் இயக்க உங்களிடம் ஒரு Node.js சேவையகம் இல்லையென்றால், ஸ்காட் ஜெல் டிரைவ்-இன் எனப்படும் எளிய பதிப்பை உருவாக்கியுள்ளார், இது அடிப்படையில் அதே வழியில் செயல்படுகிறது, ஆனால் PHP, அப்பாச்சி மற்றும் .htaccess கோப்பைப் பயன்படுத்துகிறது.

47. அடோப் நிழல்

இந்த தொலைநிலை பிழைத்திருத்த கருவி மூலம் வலை தொழில்நுட்பங்களில் அடோப் தொடர்ந்து தள்ளப்படுகிறது. மேக் அல்லது விண்டோஸில் நிழல் மற்றும் குரோம் நீட்டிப்பு, அண்ட்ராய்டு அல்லது ஐபோனில் நிழல் கிளையன்ட் ஆகியவற்றை நிறுவவும், மேலும் பல சாதனங்களுக்கு இடையில் வலைப்பக்கங்களைப் பகிரலாம்.

48. ஓபரா மொபைல் எமுலேட்டர் + ரிமோட் பிழைத்திருத்தம்

மொபைல் பக்கங்களை பிழைதிருத்தம் செய்வதற்கான ஒரு எளிய வழி, ஓபரா மற்றும் ஓபரா மொபைல் எமுலேட்டரை நிறுவி, இரண்டையும் அவற்றின் தொலைநிலை பிழைத்திருத்த விருப்பத்துடன் இணைக்க வேண்டும். அமைப்பதற்கு எளிமையானது மற்றும் விரைவானது, மேலும் வெப்கிட்டை விட அதிகமாக சோதனை செய்வதன் கூடுதல் நன்மை உள்ளது.

மேலும் உத்வேகம்

மற்றவர்கள் தங்கள் வடிவமைப்புகளை எவ்வாறு பதிலளிக்கிறார்கள் என்பதைப் பற்றிய ஒரு யோசனையைப் பெற விரும்புகிறீர்களா?

49. MediaQueri.es

நீங்கள் ஏற்கனவே பார்த்ததில்லை என்றால், Mediaqueri.es தளம் தொடர்ந்து வளர்ந்து வரும் தளங்களின் எண்ணிக்கையைக் கொண்டுள்ளது, அவை பதிலளிக்கக்கூடிய பக்கத்தைத் தாண்டிவிட்டன.

50. @RWD

ஈதன் மார்கோட் ஒரு ட்விட்டர் கணக்கை இயக்குகிறார், இது RWD உலகில் இருந்து சமீபத்திய செய்திகள், கருவிகள் மற்றும் காட்சிப்பொருட்களைக் கொண்டுவருகிறது.

டெனிஸ் ஜேக்கப்ஸ் ஒரு பேச்சாளர், எழுத்தாளர், வலை வடிவமைப்பு பயிற்சியாளர் மற்றும் படைப்பாற்றல் சுவிசேஷகர் என்று போற்றுகிறார், அதே சமயம் பீட்டர் காஸ்ஸ்டன் தி புக் ஆஃப் சிஎஸ்எஸ் 3 இன் ஆசிரியர் மற்றும் உடைந்த இணைப்புகளில் வலைப்பதிவு செய்யும் ஒரு மூத்த வலை உருவாக்குநராக உள்ளார்.

இதை விரும்பினீர்களா? இவற்றைப் படியுங்கள்!

  • மொபைல் வலைத்தளத்தை உருவாக்குவதற்கான சார்பு உதவிக்குறிப்புகள்
  • சிறந்த CSS மற்றும் ஜாவாஸ்கிரிப்ட் நுட்பங்கள்
  • பயன்பாட்டை எவ்வாறு உருவாக்குவது
  • வடிவமைப்பாளர்களுக்கான சிறந்த இலவச வலை எழுத்துருக்கள்
  • ஆக்மென்ட் ரியாலிட்டிக்கு அடுத்தது என்ன என்பதைக் கண்டறியவும்
  • இலவச அமைப்புகளைப் பதிவிறக்குக: உயர் தெளிவுத்திறன் மற்றும் இப்போது பயன்படுத்த தயாராக உள்ளது
முந்தைய கட்டுரை

இதை சோதிக்கவும்! கோட் கம்ப்யூட்டர்லோவிலிருந்து விளக்கப்படம்
அடுத்த கட்டுரை

வடிவமைப்பாளர்கள் ரோபோக்களால் மாற்றப்படுவார்களா?
சுவாரஸ்யமான வெளியீடுகள்
பெரிய கேள்வி: போர்ட்ஃபோலியோ தளங்களைப் பற்றி நீங்கள் என்ன நினைக்கிறீர்கள்?
மேலும் வாசிக்க

பெரிய கேள்வி: போர்ட்ஃபோலியோ தளங்களைப் பற்றி நீங்கள் என்ன நினைக்கிறீர்கள்?

மே 2024
டான் மால்www.danielmall.comஅந்த தளங்கள் விரைவான போர்ட்ஃபோலியோ விருப்பங்களாக சிறந்தவை. ஆன்லைனில் சில வேலைகளை வழங்கக்கூடிய வடிவத்தில் வைக்க உங்களுக்கு ஒரு மணிநேரம் மட்டுமே இருந்தால், இவை சிறந்த விருப்பங...
பதிலளிக்கக்கூடிய விளம்பரத்தின் நிலை: வெளியீட்டாளர்களின் முன்னோக்கு
மேலும் வாசிக்க

பதிலளிக்கக்கூடிய விளம்பரத்தின் நிலை: வெளியீட்டாளர்களின் முன்னோக்கு

மே 2024
ஸ்மார்ட்போன் சாதனங்கள் மற்றும் டேப்லெட்டுகளின் வெடிக்கும் வளர்ச்சியுடன், 2010 ஒரு புதிய தசாப்தத்தையும், பல திரை வடிவமைப்பு, வலை (HTML5 / C 3) மற்றும் சொந்த மொபைல் பயன்பாடுகள் (பயன்பாடு) பற்றி சிந்திப்...
ஃபோட்டோஷாப்பில் எளிய தோல் மென்மையாக்கம்
மேலும் வாசிக்க

ஃபோட்டோஷாப்பில் எளிய தோல் மென்மையாக்கம்

மே 2024
புரோ ரீடூச்சர்கள் பெரும்பாலும் ஃபோட்டோஷாப் சிஎஸ் 6 உடன் ஒரு மாதிரியின் தோலில் வேலை செய்வதன் மூலம் சில மணிநேரங்களை செலவிடுவார்கள், குளோன் மற்றும் ஹீலிங் கருவிகள் மூலம் ஒவ்வொரு அபூரணத்தையும் சிரமமின்றி ...