ਮੋਬਾਈਲ-ਫਰਸਟ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਆਪਣੀ ਬੇਸ ਸਟਾਈਲਸ ਸਭ ਤੋਂ ਛੋਟੀ ਸਕ੍ਰੀਨ ਲਈ ਲਿਖੋ, ਫਿਰ min-width ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਨਾਲ ਵੱਡੀਆਂ ਸਕ੍ਰੀਨਾਂ ਲਈ ਜਟਿਲਤਾ ਜੋੜੋ — ਬਜਾਏ ਡੈਸਕਟਾਪ ਤੋਂ ਸ਼ੁਰੂ ਕਰਕੇ ਚੀਜ਼ਾਂ ਨੂੰ ਹਟਾਉਣ ਦੇ।
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
ਮੋਬਾਈਲ-ਫਰਸਟ ਕਿਉਂ ਜਿੱਤਦਾ ਹੈ: ਬੇਸ CSS ਘੱਟੋ-ਘੱਟ ਰਹਿੰਦੀ ਹੈ (ਮੋਬਾਈਲ ਨੂੰ ਸਿਰਫ਼ ਜੋ ਚਾਹੀਦਾ ਹੈ ਮਿਲਦਾ ਹੈ — ਕਮਜ਼ੋਰ ਡਿਵਾਈਸਾਂ ਲਈ ਵਧੀਆ ਪ੍ਰਦਰਸ਼ਨ), ਅਤੇ ਤੁਸੀਂ ਜਟਿਲਤਾ ਪਰਤ ਦਰ ਪਰਤ ਜੋੜਦੇ ਹੋ, ਜੋ ਇਸ ਨੂੰ ਓਵਰਰਾਈਡ/ਹਟਾਉਣ ਨਾਲੋਂ ਸਮਝਣਾ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਇਹ ਵੀ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਸਮੱਗ੍ਰੀ ਇੱਕ ਕਾਲਮ ਤੋਂ ਬਹੁਤ ਸਾਰੇ ਕਾਲਮਾਂ ਵਿੱਚ ਕਿਵੇਂ ਕੁਦਰਤੀ ਤਰੀਕੇ ਨਾਲ ਦੁਬਾਰਾ ਪ੍ਰਬਾਹ ਹੁੰਦੀ ਹੈ।
ਮੀਡੀਆ ਕਿਊਰੀਜ਼ ਵਿਊਪੋਰਟ ਨੂੰ ਜਵਾਬ ਦਿੰਦੀਆਂ ਹਨ — ਪੂਰੀ ਖਿੜਕੀ। ਪਰ ਇੱਕ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਕੰਪੋਨੰਟ (ਕਹੋ ਇੱਕ ਕਾਰਡ) ਉਸੇ ਪੰਨੇ ਤੇ ਇੱਕ ਵਾਈਡ ਮੇਨ ਖੇਤਰ ਜਾਂ ਇੱਕ ਤੰਗ ਸਾਈਡਬਾਰ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋ ਸਕਦਾ ਹੈ। ਵਿਊਪੋਰਟ ਚੌੜਾਈ ਤੁਹਾਨੂੰ ਇਹ ਨਹੀਂ ਦੱਸ ਸਕਦੀ ਕਿ ਕੰਪੋਨੰਟ ਕੋਲ ਅਸਲ ਵਿੱਚ ਕਿੰਨੀ ਜਗ੍ਹਾ ਹੈ।
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
ਹੁਣ ਉਹੀ ਕਾਰਡ ਸਵੈਚਲਿਤ ਤੌਰ ਤੇ ਇੱਕ ਹਰੀਜ਼ੱਨਟਲ ਲੇਆਉਟ ਤੇ ਬਦਲ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਵੀ ਇਸ ਦਾ ਕਨਟੇਨਰ ≥400px ਹੁੰਦਾ ਹੈ — ਭਾਵੇਂ ਕਿ ਇਹ ਹੋਵੇ ਕਿ ਸਕ੍ਰੀਨ ਵੱਡੀ ਹੈ ਜਾਂ ਕਿ ਇਹ ਇੱਕ ਚੌੜੇ ਕਾਲਮ ਵਿੱਚ ਹੈ। ਕੰਪੋਨੰਟ ਸੱਚਮੁੱਚ ਸੰਦਰਭ-ਸੁਤੰਤਰ ਅਤੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਣ ਜਾਂਦਾ ਹੈ।
ਮੋਬਾਈਲ-ਫਰਸਟ ਜਵਾਬਦੇਹ CSS ਨੂੰ ਲਾਨ ਅਤੇ ਬਰਕਰਾਰ ਰੱਖਣ ਯੋਗ ਰੱਖਦਾ ਹੈ।
ਕਨਟੇਨਰ ਕਿਊਰੀਜ਼ ਇੱਕ ਵੱਡੀ ਤਰੱਕੀ ਹਨ: ਉਹ ਕੰਪੋਨੰਟਸ ਨੂੰ ਉਨ੍ਹਾਂ ਦੀ ਆਪਣੀ ਉਪਲਬਧ ਸਪੇਸ ਨੂੰ ਜਵਾਬ ਦੇਣ ਦਿੰਦੇ ਹਨ, ਜੋ ਕਿ ਇੱਕ ਕੰਪੋਨੰਟ-ਆਧਾਰਤ ਆਰਕੀਟੈਕਚਰ (ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ, ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਕਾਰਡਸ/ਵਿਜ਼ੇਟ) ਵਿੱਚ ਬਿਲਕੁਲ ਜੋ ਚਾਹੀਦਾ ਹੈ ਜਿੱਥੇ ਉਹੀ ਕੰਪੋਨੰਟ ਕਈ ਸੰਦਰਭਾਂ ਵਿੱਚ ਬਿਠਾਇਆ ਜਾਂਦਾ ਹੈ।