Бүх дэлгэцийн хэмжээтэй хүснэгтийг тохируулах. Утсаа эргүүлэх нь хамгийн сүүлчийн арга юм

Aspro-д: Дараа нь 1.1.7 хувилбараас эхлэн та хүснэгтүүдийг тохируулж болно гар утасны хувилбар. Өөрчлөлт хийх шаардлагатай байна эх сурвалжхуудаснууд - хүснэгтийн дасан зохицох чадварыг хариуцдаг анги нэмнэ.

Гар утасны хувилбар дахь энгийн хүснэгт нь хуудаснаас давж гардаг.

Хүснэгтийг хариу үйлдэл үзүүлэхийн тулд хүснэгтийг нэмсэн хуудсыг засах руу очно уу. Дараа нь эх кодыг засварлах горим руу очно уу.

Нээлтийн шошгоны өмнө

ангитай шошго нэмнэ үү.

Хаалтын шошгын дараа

шошгыг оруулна уу.


...

Өөрчлөлтүүдээ хадгална уу.

Одоо хүснэгт нь гүйлгэж, хүрээнээс цааш гарахгүй.

Хэвтээ байдлаар гүйлгэх үед хүснэгт нь хүрээнээс цааш гарахгүй, харин гар утасны хувилбар дээр баруун тийш гүйлгэх үед хажуугийн цэс нээгдэнэ. Цэс нь хүснэгттэй ажиллахад саад болохгүй байхын тулд хуудасны кодонд өөрчлөлт оруулах шаардлагатай.

Бид өмнө нь нэмсэн шошгондоо "swipeignore" анги нэмэх хэрэгтэй. Үүний үр дүнд шошгоны өмнө

анги бүхий шошгыг зааж өгөх ёстой.

...

Өөрчлөлтүүдээ хадгална уу.

Одоо хүснэгтийг баруун тийш гүйлгэх үед хажуугийн цэс нээгдэхгүй байгаа нь хүснэгттэй ажиллахад саад болж байна.

Баруун болон бусад хуудсан дээр гүйлгэх үед та хажуугийн цэсийг нуух боломжтой. Хажуугийн цэсийн дэлгэцийг арилгахыг хүссэн блок шошгондоо "swipeignore" анги нэмэх шаардлагатай. Хэрэв шошгонд заасан анги байхгүй бол энэ нь хэлбэрийг авна. Хэрэв шошгонд аль хэдийн анги нэмсэн бол "swipeignore" гэж хоосон зайгаар тусгаарлаж бичнэ үү, жишээ нь .

Хэрэв та вэбсайт дээрээ хүснэгтүүдийг ашигладаг бол тэдгээрийг бас тохируулах хэрэгтэй хөдөлгөөнт төхөөрөмжүүд. Би дасан зохицох хоёр сонголтыг ашигладаг - шахах, үгээр боох + хүснэгтүүдийг нэг баганад байрлуулах.

Эхний сонголт нь бүх олон баганатай хүснэгтэд тохиромжтой, хоёр дахь сонголт нь би сайт дээрх зарим сайт дээр ашигладаг. Цэсийг хүснэгт хэлбэрээр үзүүлэхэд ийм сул тал байдаг боловч нарийвчлал буурах үед тэдгээр нь маш их шахагдсан тул хэрэглэгчдийн дургүйцлийг төрүүлдэг. Нэг баганад бага нарийвчлалтай орчуулга - сайн шийдвэр, гэхдээ та үүнийг бүх хүснэгтэд ашиглах ёсгүй.

Үндсэн сонголт

Тиймээс, сайт дээрх ихэнх хүснэгтүүдэд би дараах CSS кодыг ашигладаг.

@media дэлгэц ба (хамгийн их өргөн:1000px)(td(үг таслах:бүгдийг эвдэх;)

Энэ нь блокт тохирохгүй үгс нь 1000 пикселээс бага нарийвчлалтайгаар эхлэх ёстойг зааж өгсөн. шинэ мөр. 1000-р нягтрал бол жишээ юм, өөрийн сайтуудыг хараарай, заримд нь нягтралыг бага болгох нь утгагүй юм.

Хүрэх сайн дэлгэцхүснэгтийг CSS-д давхар код ашиглах боломжтой. Би зэрэгцээ ашигладаг:

@media дэлгэц болон (хамгийн их өргөн:700px)(img(хамгийн их өргөн:96% ! чухал; өндөр:авто ! чухал;) iframe, текст талбай, оролт, товчлуур, илгээх, видео, объект, оруулах(хамгийн их өргөн: 99% ! чухал;) хүснэгт, span, div, ins(хамгийн их өргөн:100% ! чухал;)

Энэ нь 700 px-ээс бага нарийвчлалтай хүснэгтийг 100% хэмжээгээр харуулах, өөрөөр хэлбэл шахсан боловч бүхэлд нь блокийг өргөнөөр эзэлдэг гэж заасан байдаг. Чухал шинж чанар нь 700px-ээс бага бүх нягтралд хамаарна гэдгийг харуулж байна.

Нэг баганад дасан зохицох

Хүснэгтийг нэг баганад бага нарийвчлалтайгаар харуулахын тулд тохируулах нь илүү хэцүү байдаг. Бүх хүснэгтэд тохиромжгүй, гэхдээ ихэвчлэн шаардлагатай байдаг. Эхлээд хүснэгтийн анхны ангиллыг зааж өгнө үү, жишээлбэл,