Bagaimana untuk membuat laman web responsif? Ubahlah ia!

Bagaimana untuk membuat laman web responsif? Di sini anda boleh mendapatkan maklumat tentang teknik penyesuaian ini berdasarkan model web hari ini, yang bermaksud bahawa di bawah satu reka bentuk, portal web boleh diakses dan dilihat dengan betul dari mana-mana komputer atau peranti elektronik.

¿Cara membuat Laman Web Responsif?

Membuat tapak web responsif atau sensitif terhadap kemungkinan penyesuaian adalah sangat mudah. Selain menjamin kejayaan bekerja dengan betul di internet dari mana-mana platform elektronik. Dalam baris berikut, cara untuk membuat web responsif dijelaskan, yang diilhamkan daripada sifat kebolehsuaian halaman web yang sama. Oleh itu, apabila mereka bentuk halaman web di bawah model responsif, penampilan atau imej web tersebut akan dapat dilaraskan dan dilihat bergantung pada peranti elektronik yang digunakan untuk navigasi.

Tiada siapa yang tidak mengetahui tentang pelbagai bentuk peralatan atau peranti elektronik yang wujud pada masa ini untuk menavigasi Internet, seperti: komputer, tablet, telefon pintar, komputer riba, dsb. Pada zaman awal internet, pembangun laman web membiasakan diri membuat halaman dengan lebar piksel yang sama. Sebagai contoh, pada tahun 90-an, monitor yang wujud mempunyai saiz skrin tunggal 14” dengan lebar tetap 640 piksel. Pereka bentuk halaman web memasang reka bentuk mereka pada dimensi standard satu-satunya monitor yang wujud.

Berhampiran dengan awal tahun 2000 dan sehingga ketibaan tahun 2010, model monitor dan lebar piksel berbeza-beza. Reka bentuk web telah disesuaikan dengan setiap variasi. Ia adalah dari tahun 2010 bahawa revolusi teknologi yang hebat berlaku, menyebabkan ketidakseimbangan dalam senario reka bentuk halaman web. Navigasi melalui telefon mudah alih telah diperkenalkan dalam bidang Internet. Telefoni baharu ini menggunakan pelayar seperti komputer. Dengan revolusi teknologi yang hebat ini, masanya telah tiba untuk maju ke apa yang dikenali sebagai Reka Bentuk Responsif atau Reka Bentuk Adaptif halaman web.

Kepentingan mengetahui cara membuat Web Responsif

Adalah sangat penting bahawa pembangun halaman web mengetahui cara membuat web responsif; malah syarikat Google yang berprestij besar di internet menunjukkannya sebagai sesuatu yang amat perlu. Kerana halaman web yang direka bentuk di bawah model responsif membolehkan pengoptimuman navigasi, mengelakkan kandungan pendua dan memberikan kualiti imej yang sangat stabil. Aspek lain yang penting semasa membuat tapak web responsif ialah:

• Dengan satu penyesuaian bahasa penanda hiperteks (HTML) dan bahasa CSS, ia boleh dicapai untuk meliputi sebarang resolusi skrin. Oleh itu mengelakkan penciptaan halaman web untuk setiap jenis peranti yang membolehkan anda melawati atau menyemak imbasnya. Aspek ini juga mengurangkan masa reka bentuk.
• Ia menyesuaikan diri secara automatik apabila menyemak imbas, menjadikan pembacaan dan interaksi mungkin pada setiap lawatan tertentu.
• Mereka berjaya meletakkan diri mereka lebih baik dan lebih pantas dalam enjin carian. Oleh kerana reka bentuk jenis ini mengelakkan pertindihan dan ubah hala.
• Halaman web yang dibuat di bawah reka bentuk ini membolehkan kandungannya menjadi viral dengan lebih cepat, kerana cara perkongsian asal dan ringkasnya.

Apakah itu Reka Bentuk Web Responsif

Reka bentuk web responsif, juga dikenali sebagai reka bentuk web adaptif, ialah cara mereka bentuk atau membangunkan halaman web. Sistem ini mempunyai keistimewaan membenarkan laman web yang dibuat di bawah satu reka bentuk untuk dilawati atau diakses dari mana-mana komputer atau platform elektronik. Nama responsif ialah istilah Inggeris yang merujuk kepada sesuatu yang responsif, boleh disesuaikan, boleh dilihat, kelihatan, dsb.

Teknik ini menerima nama ini kerana keupayaan laman web jenis ini untuk menyesuaikan dengan setiap ukuran lebar skrin. Menjadikan paparan dan operasi yang betul mungkin, tanpa membuat sebarang perbezaan tentang peranti yang digunakan untuk navigasi.

Ini adalah mungkin terima kasih kepada organisasi imej dan kandungan, serta kesederhanaan menu web responsif. Empat kelayakan utama yang menentukan dan menjadikan jenis reka bentuk halaman web ini sangat popular ialah:

• Ringkas
• Ekonomik
• Cepat
• Dan di atas semua di atas, ia berfungsi sepenuhnya

Cara membuat Web Reka Bentuk Responsif dan kerumitannya

Kerumitan mengenai reka bentuk dan pembangunan laman web boleh dikatakan telah muncul sejak tahun 2010-an, apabila telefon bimbit dengan navigasi mula muncul di persada internet. Yang menggunakan pelayar seperti Google, Firefox, Explorer, antara lain, sama seperti PC. Menjadi dengan cara ini dalam kemungkinan baru melawat tapak web yang berbeza. Pada masa ini tablet elektronik pertama dengan capaian internet juga mula muncul.

Dari situ keperluan untuk reka bentuk laman web menjadi lebih kompleks. Disebabkan oleh pelbagai jenis saiz skrin yang wujud untuk paparan dan pengendalian tapak web. Anda perlu mencari jenis reka bentuk yang sesuai untuk sebarang jenis peranti dan melaraskan secara automatik.

Anda tidak lagi boleh mereka bentuk untuk satu, dua atau tiga resolusi skrin utama. Adalah perlu untuk memahami bahawa resolusi peranti akan menjadi semakin berubah-ubah, di samping menjadi lebih kecil daripada monitor komputer.

Detik ini menandakan berakhirnya ketegaran reka bentuk web. Dan bukan sahaja kepada pelbagai jenis peranti, tetapi juga setiap daripada mereka mempunyai ciri khusus, seperti:

• Saiz skrin
• Resolusi skrin
• kuasa CPU
• Sistema operativo
• Kapasiti ingatan antara lain.

Model reka bentuk web baharu kemudiannya diperkenalkan, yang objektifnya ialah dengan satu reka bentuk, visualisasi yang betul boleh dilakukan tanpa mengira peranti penyemakan imbas. Walau bagaimanapun, membangunkan laman web jenis ini mempunyai tahap kerumitannya.

Apakah sebab kerumitan membangunkan Web Responsif?

Membangunkan tapak web di bawah reka bentuk kebolehsuaian yang dipanggil responsif mempunyai tahap kerumitannya, malah pada hari ini. Disebabkan oleh dua punca utama, yang ditunjukkan di bawah:

1-Ia adalah teknologi yang tidak dibangunkan untuk masa yang lama dan disebabkan oleh pelbagai cara aplikasi, ia tidak mungkin untuk menentukan yang mana mungkin yang terbaik daripada semua pilihan. Inovasi sentiasa muncul dari segi reka bentuk web jenis ini untuk dibangunkan pada setiap saat. Oleh itu, adalah sukar untuk menentukan rangka kerja atau teknologi sokongan yang terbaik, mahupun peraturan am yang memastikan penyelesaian kepada sejumlah besar halangan yang mungkin. Untuk menjadikannya lebih mudah untuk membangunkan laman web jenis ini.

2- Punca kedua ialah sistem reka bentuk adaptif tidak berasaskan semata-mata dari sudut teknologi. Bagi cara tapak akan berbeza mengikut skrin atau peranti yang berbeza. Sebaliknya, ia mesti direka bentuk dengan idea bagaimana ia akan berfungsi dalam setiap senario navigasi yang mungkin. Sebab ini menambahkan tahap kerumitan yang tinggi pada model reka bentuk web responsif untuk dibersihkan oleh orang yang bekerja sebagai pembangun tapak.

Berlatih dan memperoleh kemahiran yang mencukupi untuk bekerja dengan reka bentuk web yang adaptif atau responsif memerlukan lebih banyak masa berbanding dengan mana-mana jenis reka bentuk web yang lain. Tetapi diharapkan, dengan kemajuan dalam pengkomputeran, tahap kerumitan akan menjadi kurang. Untuk terus berkembang dalam hal ini, daripada kakitangan yang mempunyai pengetahuan laman web yang terlibat dalam jenis reka bentuk responsif, kakitangan profesional seperti:

• Susun atur
• Pereka
• Pengaturcara
• Kakitangan pemasaran komersial dan digital

Kurangkan masa reka bentuk

Jika dua punca sebelum ini diselesaikan, mungkin ini akan mengurangkan tempoh pembangunan atau penciptaan web responsif. Pada masa yang sama adalah mungkin untuk menjadikannya tersedia untuk kegunaan laman web biasa.

Sementara itu, seperti yang kita ada hari ini, mungkin lebih pantas untuk membangunkan reka bentuk web baharu untuk peranti mudah alih dari awal; untuk mengubah atau mereka bentuk semula web untuk menjadikannya boleh disesuaikan atau responsif. Akan sentiasa ada harapan bahawa suatu hari nanti seseorang akan mencari jalan untuk melakukannya dan mencapainya, mari kita berharap untuk itu.

Sementara itu, apa yang boleh dilakukan?

Hakikat bahawa masih sangat kompleks untuk mereka bentuk semula keseluruhan tapak yang kami ada di web, untuk menjadikannya boleh disesuaikan. Ini tidak bermakna kami berhenti membuat beberapa perubahan kecil pada tapak. Untuk menambah baiknya dan menjadikannya responsif kepada penyesuaian pada pelayar yang berbeza serta pada peranti elektronik yang berbeza.

Perkara pertama yang perlu dilakukan ialah mengesahkan jenis reka bentuk web yang ada pada tapak navigasi. Terutamanya semak:

• Susun atur laman web
• Apakah strukturnya dari segi Html dan CSS

Menganalisis dua perkara asas ini, dapat dipastikan bahawa pengubahsuaian kecil boleh dibuat untuk menambah baik laman web.

Pertimbangan sebelum ini perlu diambil kira untuk mengetahui cara membuat Web Responsif

Sekiranya anda sudah mempunyai portal web, halaman pendaratan atau blog kandungan, yang dibangunkan di bawah reka bentuk biasa dan anda ingin mengubahnya menjadi tapak web reka bentuk responsif atau kebolehsuaian. Ia hanya membuat keputusan dan mengambil langkah pertama untuk mencapainya, membuat keputusan untuk melakukannya!

Fakta mengubah tapak web daripada reka bentuk konvensional kepada responsif tidak bermakna semua kerja asal akan hilang. Memandangkan tidak semua kandungan akan dibuang, tetapi ia akan mengalami sedikit dan perubahan kecil di dalamnya. Kandungan seperti imej, teks dan beberapa elemen lain dari tapak sedia ada boleh digunakan dan berfungsi dengan betul dengan transformasi.

Walau bagaimanapun, berhadapan dengan alternatif untuk menyesuaikan dan menambah baik tapak, adalah mudah untuk mengetahui beberapa pertimbangan terdahulu yang akan memihak kepada kerja yang akan dijalankan.

Semak Pergerakan Web sedia ada

Sebelum melakukan sebarang perubahan dalam web sedia ada, anda dinasihatkan untuk mengesahkan trafik yang dialaminya. Iaitu, statistik mengenai bilangan orang yang melawat laman web tersebut. Berdasarkan maklumat ini, kami akan berusaha untuk mengubah suai reka bentuk, dengan tujuan untuk mencapai kejayaan yang lebih besar dan kedudukan carian yang lebih baik. Dalam reka bentuk semula dan penyesuaian web adalah mudah untuk mengetahui tentang Alat SEO, kerana mereka adalah yang terbaik untuk mendapatkan kedudukan yang lebih baik dalam rangkaian.

Inspirasi yang baik adalah perlu

Ia juga dinasihatkan untuk melihat dan membuat a analisis pesaing atau halaman dengan kandungan yang serupa dengan tapak web yang mana perubahan ke arah reka bentuk web responsif akan digunakan. Pratonton ini bertujuan untuk menjalankan penyelidikan untuk kemungkinan penambahbaikan kandungan. Tetapi juga cara halaman yang serupa itu berfungsi pada peranti yang berbeza. Aspek-aspek yang perlu diambil kira bagi pemilihan tapak yang boleh menjadi inspirasi atau model dalam penambahbaikan. Ia akan menjadi kemudahan navigasi pada halaman tersebut dan halaman yang memerlukan kurang zum atau menatal. Di sini anda boleh mencari helah terbaik untuk Tingkatkan SEO untuk mencapai kandungan yang baik Gunakannya!

Semantik Html nikmat

Penggunaan Html semantik menunjukkan bahawa susun atur laman web asal telah diwujudkan dengan betul. Ini memihak atau sangat membantu, kerana hanya elemen Html yang penting digunakan. Mengingati dalam pembangunan web, semantik setiap teg di atas reka bentuk web yang sama. Serahkan kepada CSS kerja reka bentuk sendiri, mengikut kelas dan ID.

Semasa proses cara membuat tapak web responsif, elemen seperti:

• DIV
• P
• UL
• LI, antara lain

Walau bagaimanapun, jika perlu untuk mematuhi langkah mendispens keseluruhan reka bentuk model. Kerana anda tidak boleh menggunakan CSS yang mengganggu, iaitu, jangan gunakan sebarang atribut Gaya dalam kod. Oleh kerana Html yang lebih halus dan kurang DIV, ia akan membantu memudahkan untuk menjalankan penyesuaian atau menjadikan web lebih sensitif. Kerana CSS akan dipertingkatkan dalam hasil yang diperolehi.

Tetapkan Zum dengan Betul tentang cara membuat tapak web responsif

Pilihan zum dalam penyemak imbas mudah alih yang betul disyorkan untuk mencapai paparan penuh tapak web. Pelayar pada peranti mudah alih telah wujud sebelum reka bentuk web responsif mula dibangunkan. Untuk paparan penuh tapak web pada peranti ini, penyemak imbas perlu menggunakan alat zum. Jadi apabila mengakses laman web yang direka bentuk secara tradisional daripada peranti mudah alih. Peleraian semula jadi mudah alih tidak akan dilihat, tetapi penyesuaian yang dijalankan oleh alat zum akan dipaparkan sehingga ia dilaraskan kepada lebar 960 piksel.

Kerana tiada cara lain untuk melakukannya, pembangun telah mencipta Html yang melakukan perubahan atau pelarasan zum. Beginilah, semasa menjalankan penyesuaian resolusi pada peranti, pasukan mesti diberitahu untuk menggunakan jenis penskalaan yang lain. Jenis yang sesuai untuk digunakan ialah tag meta yang dikenali sebagai viewport, yang dimasukkan dalam kepala tapak web. Dengan tag meta ini, anda boleh memperincikan prosedur yang akan dilaksanakan oleh penyemak imbas dalam web yang diubah. Lihat sintaks berikut, bertulis kata kerja:

Reka letak simbolik teg meta port pandang ini adalah yang paling kerap digunakan dalam reka bentuk web responsif. Walau bagaimanapun, terdapat banyak konfigurasi lain yang boleh digunakan untuk tujuan ini. Hanya sintaks yang dibentangkan mengandungi dua pembolehubah yang menjadikan penyemak imbas mudah alih menyesuaikan diri dengan web dan bukan sebaliknya. Pembolehubah ini ialah:

Lebar peranti atau lebar peranti

Lebar berubah=lebar peranti disertakan dalam konfigurasi supaya lebar dalam piksel skrin sepadan dengan lebar peranti mudah alih. Dengan cara ini, resolusi mudah alih itu sendiri dipaparkan.

Untuk memberikan penggunaan yang terbaik, penyemak imbas mudah alih memaparkan halaman yang serupa dengan lebar skrin desktop. Lebar ini mungkin berbeza bergantung pada peranti mudah alih. Tetapi selalunya ia biasanya salah satu daripada kira-kira 980 piksel. Selepas itu, ia berusaha untuk mengoptimumkan penampilan kandungan dengan membesarkan saiz fon, serta menukar skala kandungan supaya ia sesuai dengan skrin peranti.

Ini boleh menyebabkan pengguna mendapati ia agak tidak koheren atau mengelirukan dan kemudian perlu mengetik dua kali untuk mengezum masuk untuk melibatkan diri dengan kandungan. Menggunakan pembolehubah teg meta port pandang: width=device-width memerlukan tindakan pada reka letak untuk melaraskan lebar. Dengan cara yang halaman itu boleh melaraskan semula kandungan agar sesuai dengan dimensi skrin yang berbeza, sama ada ia dipaparkan pada telefon bimbit kecil atau pada monitor PC.

Skala Permulaan atau Skala Permulaan

Pembolehubah skala awal= disertakan dalam konfigurasi untuk menentukan skala hubungan antara piksel CSS dan piksel mudah alih bergantung pada peranti. Dalam konfigurasi yang ditunjukkan di atas, ia ditunjukkan untuk skala awal: skala awal=1.0. Di sini sintaks menunjukkan bahawa hubungan antara piksel ialah 1:1, piksel CSS dibaca kepada piksel peranti. Perintah itu kemudiannya diberikan kepada penyemak imbas mudah alih untuk menggunakan nilai ini untuk zum dan ia akan menjadi yang digunakan oleh peranti. Walau bagaimanapun, mari kita lihat dua pilihan berikut:

1. Apabila pembolehubah skala awal adalah sama dengan 1.0, ia merujuk kepada paparan tanpa zum, kerana ia adalah satu kepada satu.
2. Manakala jika skala awal=2.0, pembolehubah merujuk kepada zum yang dibesarkan kepada dua kali ganda saiznya pada keseluruhan halaman.

Oleh itu, pilihan yang sesuai untuk digunakan pada tapak web yang direka bentuk agar sesuai dengan lebar telefon bimbit adalah yang pertama. Ini mengarahkan peranti supaya tidak menggunakan sebarang zum. Tetapi juga, mungkin terdapat kes di mana pilihan terbaik adalah untuk tidak memasukkan atau menggunakan pembolehubah ini. Meninggalkan dengan cara ini bahawa mudah alih yang sama adalah yang menyesuaikan zum dengan sendirinya, kepada lebar yang telah ditunjukkan dalam reka bentuk.

Konfigurasi Asas Viewport – Contoh Aplikasi:

Sama ada anda mempunyai lebar 500 piksel dan arahan skala awal diberikan, web mengambil rupa lebar skrin 500 piksel. Walau bagaimanapun, pada mudah alih, konfigurasi asalnya akan dipaparkan dengan nisbah setara anggaran 320 piksel daripada 500 jumlah piksel web.

Walau bagaimanapun, jika, sebaliknya, pesanan skala awal tidak diberikan, keseluruhan web dipaparkan, iaitu, 500 piksel, di bawah zum yang disesuaikan. Sintaks dua konfigurasi tipikal teg port pandang ini, adalah secara teks seperti berikut:

Konfigurasi sebelumnya adalah untuk tapak web dengan reka bentuk responsif yang disesuaikan dengan betul kepada resolusi mudah alih. Manakala untuk tapak web yang belum disesuaikan sepenuhnya dengan resolusi mudah alih, konfigurasi adalah seperti berikut:

Sebagai tambahan kepada yang biasa, terdapat beberapa konfigurasi lain. Salah satunya ialah mereka bentuk tapak web dengan lebar telefon bimbit, menggunakan zum. Tetapi reka bentuk jenis ini akan menjadi sangat pelik dan mengelirukan bagi pengguna.

Cara Membuat Laman Web Responsif – Pertanyaan Media

Apabila anda ingin mengetahui cara membuat tapak web responsif atau halaman yang boleh disesuaikan, anda harus tahu bahawa anda perlu menggunakan sistem yang dikenali sebagai pertanyaan media. Teknik ini membolehkan anda mewujudkan, melalui keadaan, bentuk atau gaya yang berbeza bergantung pada resolusi skrin. Tetapi apakah itu Media Queries?

Pertanyaan Media

Pertanyaan media ialah teknik yang terdiri daripada membina ayat CSS. Dengan mana anda boleh membuat kenyataan yang berkenaan dengan reka bentuk web, selagi syarat tertentu yang telah diberikan atau ditetapkan dipenuhi. Kenyataan pertanyaan media ini pada asasnya boleh digunakan pada dua titik di web:

• Pertama, dalam panggilan ke fail CSS, menyatakan dalam setiap satu apakah syarat untuk memuatkannya. Contoh:

• Kedua, dalam fail CSS yang sama, mewujudkan ruang yang berasingan di mana pecahan CSS untuk digunakan disertakan. Contoh:

@media skrin dan (min-lebar:320px) dan (max-lebar:480px){

/*Pengisytiharan Gaya Untuk Julat Lebar Ini */

Pada hakikatnya, pertanyaan media ialah alat berkuasa yang membolehkan kemungkinan meninggalkan reka bentuk web responsif, untuk melaksanakan isu lain yang berbeza dalam web. Berbaloi untuk didokumentasikan kemudian, sedikit lagi tentang teknik pertanyaan media ini.

Sementara itu, buat masa ini sudah cukup untuk mengetahui dua perkara mengenai sistem pertanyaan media:

1. Cara untuk membuat pengisytiharan pertanyaan media dalam fail CSS
2. Bagaimana untuk mengemas kini dengan endowmen teknik pertanyaan media kepada pelayar internet lama

Pengisytiharan Pertanyaan Media

Dalam perenggan sebelumnya adalah mungkin untuk memerhatikan dua cara untuk melaksanakan pertanyaan media. Pertama dalam halaman gaya luaran dan cara kedua untuk menulis terus ke halaman gaya.

Dalam konteks cara membuat reka bentuk web responsif, perlu difahami bahawa pertanyaan media ialah pengisytiharan CSS yang digunakan sebagai penunjuk untuk mengetahui apabila pengisytiharan gaya lain perlu dibuat berdasarkan ukuran atau nilai mudah alih. atau peranti lain yang mana web akan dipaparkan.

Contoh, cara untuk mengisytiharkan pecahan CSS, yang berada di dalam syarat yang ditakrifkan oleh pertanyaan media, mempunyai konfigurasi sintaks berikut:

skrin @media dan ([KEADAAN]) {

/* Peraturan baharu kami dengan lebar skrin ini atau kurang */

}

Begitu juga, bergantung pada lebar skrin, tiga jenis pernyataan pertanyaan media boleh dijana. Dengan cara ini anda boleh memastikan permohonan anda dalam setiap kes

-Pengisytiharan pertama hendaklah digunakan hanya dalam resolusi yang kurang daripada lebar piksel = X:

@media skrin dan (lebar maksimum:[WIDTH]px) {

/* Peraturan baharu kami dengan lebar skrin ini atau kurang */

}

-Pengisytiharan kedua hendaklah digunakan hanya dalam resolusi yang lebih besar daripada lebar piksel = X:

@media skrin dan (min-lebar:[WIDTH]px) {

/* Peraturan baharu kami dengan lebar skrin ini atau lebih */

}

-Pengisytiharan ketiga akan digunakan dalam resolusi yang mempunyai lebar antara julat piksel yang ditakrifkan antara X dan Y:

@media skrin dan (min-lebar:[WIDTH X]px) dan (max-lebar:[WIDTH Y]px) {

/* Peraturan baharu kami dengan lebar skrin ini atau lebih */

}

Yang mana antara tiga?

Keputusan akan berdasarkan citarasa pemaju. Walau bagaimanapun, lebih banyak lagi, adalah perkara biasa untuk menggunakan pernyataan pertanyaan media pertama yang ditunjukkan di atas. Hanya disyorkan bahawa ia digunakan secara kumulatif. Dengan cara sedemikian, setiap kali lebar dibuat lebih kecil, elemen reka bentuk diubah suai.

Jadikan Pertanyaan Media serasi dengan Internet Explorer

Internet Explorer ialah salah satu penyemak imbas atau penyemak imbas pertama yang wujud di web. Oleh itu, kemungkinan besar pelayar ini tidak menyokong atau serasi dengan banyak sistem, parameter atau teknik yang sering digunakan oleh pengguna Internet. Tetapi terdapat ramai kakitangan teknikal dalam pembangunan web, terlibat sepenuhnya dalam pencarian inovasi. Yang telah mencipta pelbagai perpustakaan untuk mendayakan dan menjadikan penyemak imbas lama ini serasi.

Untuk membuat versi yang serasi kurang daripada nombor sembilan (9) Internet Explorer. Ia hanya menggunakan perpustakaan javascript berikut: css3-mediaqueries-js.

Dengan meletakkan skrip berikut di kepala tapak web, anda akan dapat bekerja dengan pertanyaan media tanpa sebarang kesulitan.

Hasil yang diperoleh mungkin bukan yang paling sempurna, tetapi secara amnya ia membolehkan tahap keserasian yang baik.

Cara membuat Laman Web Responsif – Reka bentuk asas

Mungkin terdapat cara yang berbeza untuk menyesuaikan laman web dan mengubahnya, namun tapak web responsif pada masa ini mempunyai tiga asas atau bentuk konsep reka bentuk. Sebelum ini pratonton pembangun telah ditunjukkan dengan beberapa butiran baharu untuk digunakan dalam reka bentuk ini. Ia datang daripada tabiat membangunkan laman web yang dicirikan sebagai tegar atau tetap. Untuk beralih ke tapak web yang direka bentuk responsif, mengubah ciri ketegaran itu.

Hari ini anda boleh menemui peranti elektronik yang tidak berkesudahan yang boleh anda gunakan untuk menyemak imbas web. Dan dengan peredaran masa jumlahnya akan menjadi lebih besar. Pembangun tapak web memerlukan tapak web ini dapat menyesuaikan dengan betul kepada rangkaian peranti yang luas ini.

Reka bentuk asas untuk memudahkan kerja

Satu cara untuk memudahkan tugas reka bentuk responsif ialah membahagikan atau mengelaskannya kepada tiga kumpulan asas untuk mengetahui cara menanganinya. Tiga kumpulan besar yang layak ini ialah:

1. Skrin besar: Di mana tapak web mempunyai ruang yang mencukupi dan lebih banyak lagi untuk dapat dilihat sepenuhnya tanpa sebarang kesulitan.
2. Skrin lama atau kecil: Di mana web tidak menemui lebar yang mencukupi untuk visualisasi lengkapnya, iaitu, ia tidak muat dalam bingkai skrin. Ia juga menunjukkan bar bawah yang tidak selesa, tanpa sebarang penggunaan yang membolehkan anda melihat lebih sedikit kandungannya.
3. Skrin peranti mudah alih: Web menemui ruang yang begitu kecil pada peranti ini yang hanya dengan reka bentuk umum, adalah mungkin untuk membaca maklumat kandungannya.

Jadi jika anda ingin mengubah reka bentuk asal dan susun atur tapak web kepada yang dikemas kini yang boleh digunakan dan berdaya maju. Apa yang diperlukan ialah menyelesaikan tiga kumpulan asas ini. Tahap kesukaran untuk mendapatkan penyelesaian secara amnya bergantung pada bagaimana model telah dirumuskan. Tetapi, secara umum, dengan teknologi hari ini, beberapa perubahan boleh dicapai di web.

Cara membuat Web Responsif untuk skrin besar – Penyelesaian

Pada titik asas ini ia biasanya tidak mewakili sebarang kesukaran besar. Kerana web direka bentuk untuk dilihat dalam format skrin besar ini. Piawaian semasa ialah tapak web adalah berdasarkan bingkai tengah dengan lebar skrin dalam piksel 960. Dengan cara yang apabila ia dimuatkan pada telefon mudah alih dengan zum yang disesuaikan, ia sesuai dengan kebanyakannya dengan betul. . Tetapi dalam kes tapak web lama, bingkai tengah selebar piksel itu mungkin direka untuk skrin dengan lebar 1024 piksel. Dalam mana-mana kes, untuk kumpulan asas ini adalah munasabah untuk menggunakan bekas seperti yang ditunjukkan oleh sintaks berikut:

#utama { width:960px; margin:0 auto; }

Konfigurasi ini menyokong tetapan bekas "utama" yang membolehkannya berpusatkan web. Bersama bekas ini, latar belakang yang berbeza boleh ditambah untuk memperkayakan penampilan luaran web. Membangunkan reka bentuknya sedikit untuk mengelakkan halaman hitam-putih sebanyak mungkin.

Pendek kata, pada tahap skrin besar ini, tidak banyak yang dilakukan untuk mengubah web. Walaupun mungkin ada pengguna web yang ingin melihatnya dari TV dengan skrin besar dan juga pada jarak tontonan yang singkat.

Kes ini memerlukan perubahan besar seperti dalam kumpulan asas mudah alih. Tetapi oleh kerana biasanya tidak ramai yang menggunakan TV untuk menavigasi, pembangun biasanya tidak melabur banyak masa dalam penyesuaian ini. Jika anda masih mahu mengusahakan penyesuaian jenis ini, adalah disyorkan untuk mewujudkan peraturan yang serupa dengan yang digunakan dalam kumpulan mudah alih, yang ditunjukkan di bawah.

Cara membuat Web Responsif untuk skrin kecil – Penyelesaian

Daripada kumpulan reka bentuk asas ini, kerumitan transformasi web untuk disesuaikan bermula. Senario ini ialah halaman berikut yang dibuat untuk berfungsi pada lebar skrin yang diberikan. Malah, sebilangan orang melawatnya dari komputer yang disesuaikan dengan lebar itu. Tetapi terdapat juga peratusan besar orang yang perlu dipertimbangkan, yang mempunyai peranti dengan resolusi yang lebih rendah daripada reka bentuk untuk melawati web.

Dalam kumpulan pengelasan ini, peranti dengan resolusi skrin lebih rendah daripada reka bentuk mesti diasingkan daripada peranti mudah alih. Nah, kes-kes ini dianalisis dalam kes reka bentuk ketiga. Oleh itu, adalah perlu untuk bermula dari definisi yang jelas tentang titik di mana peranti skrin kecil berakhir dan titik di mana peranti mudah alih bermula.

Untuk skrin kecil dengan cara yang sama, resolusi tapak web asal mesti dikurangkan untuk menyesuaikannya dengan peranti tersebut. Cuma, ia mesti jelas sejauh mana penurunan ini akan dilakukan, tanpa melampauinya. Supaya sejumlah besar elemen tidak terkumpul pada skrin kecil, mengurangkan penampilan web.

Maklumat Diperlukan untuk Menetapkan Had

Maklumat daripada peranti mudah alih dikongsi di bawah. Yang akan menjadi sangat penting apabila ia datang untuk menetapkan had apabila ia berhenti menjadi skrin kecil, untuk menjadi peranti mudah alih. Ini akan menjadikan keputusan lebih mudah.

data mudah alih:

• Mudah alih digunakan secara menegak, yang merupakan bentuk yang paling kerap digunakan. Ia biasanya menggunakan resolusi 320 piksel lebar.
• Dalam kedudukan mendatar, resolusi mudah alih dilaraskan kepada saiz sebenar skrin peranti. Resolusi ini biasanya antara 400 dan 600 piksel lebar.
• Sebaliknya, dalam tablet, resolusi akan bergantung pada peranti. Secara umum, dengan mengambil kira statistik model terlaris, resolusinya adalah sekitar 600 piksel lebar. Mampu mencapai 1024 piksel lebar.

Had lebar skrin

Had lebar standard terbesar yang akan diterima pakai dalam reka bentuk web responsif dalam klasifikasi ini, menurut maklumat sebelumnya, adalah sehingga lebar 400 piksel. Daripada ukuran lebar ini, perubahan dalam visualisasi web mesti bermula secara drastik, serta operasi asasnya akan mengalami perubahan tertentu.

Walau bagaimanapun, lebih banyak lagi, sesetengah pembangun menetapkan had ini kepada lebar 600 piksel. Mencipta daripada resolusi ini, penyesuaian perantaraan antara skrin kecil dan peranti mudah alih.

Pada bahagian had bawah, ia ditetapkan untuk menggunakan lebar skrin minimum sehingga 320 piksel. Walau apa pun, terpulang kepada pembangun web untuk mewujudkan julat yang lebih besar daripada had yang diberikan ini. Tetapi tidak digalakkan untuk cuba menutup semua peranti skrin kecil.

Gaya navigasi utama dalam penyelesaian skrin kecil

Menangkap sekurang-kurangnya tiga gaya navigasi utama ini mungkin memadai dalam penyelesaian penyesuaian skrin kecil. Yang disenaraikan di bawah:

• Peranti mudah alih yang digunakan secara menegak: Dalam kes ini, skrin peranti hanya membenarkan bacaan dan navigasi yang sangat mudah, yang ditetapkan dalam julat resolusi antara 320 dan 400 piksel.
• Peranti mudah alih yang digunakan secara mendatar dan tablet: Dalam kes ini, paparan mendatar tradisional sudah boleh dicapai. Walau bagaimanapun, perlu diperhatikan bahawa navigasi dihasilkan melalui sentuhan dan bukan dengan mengklik. Menurut tindakan ini harus dielakkan: onMouseOver dalam 400, 600 atau 800 piksel.
• peranti atas meja: Dalam kes ini, reka bentuk web biasa berfungsi tanpa sebarang masalah dengan lebar skrin melebihi 800 piksel.

Setelah menyatakan semua perkara di atas, skrin kecil difahamkan bermaksud pelbagai PC, peranti mudah alih landskap dan tablet. Kepelbagaian ini merangkumi kumpulan ini dengan kerumitan lembut untuk menyesuaikan web kepada reka bentuk responsif. Dalam kes ini, ia adalah sangat penting untuk memudahkan kerja, kerja susun atur yang dijalankan oleh blok. Untuk menyatukan tiga jenis peranti dalam satu tindakan.

Jika ia ditakrifkan dengan jelas daripada lebar skrin mudah alih yang dipertimbangkan. Format skrin perantaraan yang akan dipaparkan dijelaskan. Untuk mengubah blok susun atur semasa supaya mereka menukar saiz mengikut skrin dan boleh berfungsi serta dipaparkan dengan betul.

Bekas Lebar Global

Bekas global dalam laman web memenuhi fungsi menunjuk atau menunjukkan lebar global. Maksudnya dengan elemen ini anda boleh memusatkan dan menetapkan lebar tertentu ke tapak web. Mereka memberikan konfigurasi sedikit fleksibiliti dengan menukar daripada lebar tetap kepada lebar maksimum atau penutup. Diwujudkan dalam pengisytiharan awal untuk rangka kerja web, berubah daripada lebar a max-lebar. Dengan cara yang sama, lebar minimum ditetapkan mengikut julat yang ditetapkan sebelum ini, dengan pengisytiharan lebar min. Oleh itu, adalah mungkin untuk mengawal lebar peranti yang dianggap tidak berada dalam kawalan. Mengambil julat had lebar skrin yang diberikan di atas; Sintaks pengisytiharan adalah seperti berikut:

#utama {max-width:960px; lebar min: 320px; margin:0 auto;}

Untuk skrin besar penyelesaiannya adalah sama. Walau bagaimanapun, lebih banyak lagi, apabila saiz web secara beransur-ansur berkurangan secara serentak, bingkai tengah akan melakukannya dengan lebar.

Contoh praktikal

Di bawah ialah contoh praktikal pada tetapan untuk transformasi bingkai lebar. Dalam contoh ini terdapat tapak web dengan lebar 1080 piksel, yang digunakan pada elemen pengepala, kandungan utama dan pengaki. Perkara pertama yang perlu dilakukan ialah menunjukkan bahawa lebar dalam blok kontena global yang berbeza, bukan sebagai lebar tetap, tetapi sebagai lebar halaman maksimum. Bagi ayat, ia bergantung kepada bilangan blok jenis ini yang akan digunakan. Jadi mari kita lihat sintaks berikut:

#header #top {kedudukan:relatif; lebar maksimum: 1074px; lebar min: 320px; ketinggian:115px; margin:0 auto; […]}

[...]

#header ul.menu {kedudukan:relative; lebar maksimum: 1008px; lebar min:320px; ketinggian:95px; […]}

[...]

#aux-main{position:relative; lebar maksimum: 1008px; lebar min: 320px; margin:0 auto; […]}

[...]

#footer ul {lebar maksimum:768px; lebar min: 320px; margin:10px auto;}

Bekas Dalaman

Dari sudut ini, kami akan menyelidiki sedikit lagi tentang cara membuat tapak web responsif dengan mengubahnya. Hampir pasti bahawa halaman yang akan diubah terdiri daripada reka bentuk atau reka letak, dibahagikan kepada elemen yang berbeza, sebagai contoh, ia boleh menjadi:

• Tajuk lebar seratus peratus
• Kandungan yang menduduki sebahagian besar daripada lebar
• Di bahagian sisi satu atau lebih bar sisi atau bar sisi
• Menduduki seratus peratus lebar, pengaki

Jadi anda akan mempunyai beberapa bekas yang mungkin mempunyai lebar tetap yang menentukan lajur pada halaman. Bekas ini mungkin telah diubah menjadi lajur melalui aplikasi pelbagai teknik, seperti:

• Terapung dalam jumlah terbesar
• Paparan:sebaris dalam beberapa kes
• Paparan:kotak dalam yang lain daripadanya

Langkah seterusnya yang perlu diambil ialah dapat mengubah elemen tersebut menjadi kenyataan yang tidak begitu tepat. Supaya bekas induk tidak betul-betul menentukur pernyataan asal yang ditunjuk. Atau apa yang sama, anda mesti menukar daripada piksel kepada nilai peratusan dalam semua elemen yang merujuk kepada ruang dalam lebar tapak web, seperti yang berikut:

• Lebar
• lebar maks
• Margin dan
• Pelapis

Dengan kerja susun atur yang telah dilakukan sebelum ini, langkah ini menjadi sangat mudah. Memandangkan ia hanya membuat pembahagian, untuk dapat menentukan apa yang sepadan dengan ukuran dalam piksel elemen kontena dalam nilai peratusan. Oleh itu, peratusan akan dikira dengan menggunakan persamaan matematik berikut:

[Px lebar elemen dalam] / [Px lebar elemen induk] * 100

Ia merupakan kaedah yang baik untuk pembangun web membiasakan diri menggunakan model web dengan ukuran dalam peratusan, kerana langkah ini sudah pun dapat diselesaikan.

Pengiraan peratusan

Langkah seterusnya yang perlu dilakukan ialah pengiraan peratusan. Dalam bahagian ini sesuatu yang menjengkelkan boleh dipersembahkan dari segi lajur. Kerana lajur sebelumnya telah dibina dengan unsur apungan dan apabila anda mengecilkan bingkai, bar sisi bergerak ke bawah kandungan. Walau bagaimanapun, persamaan di atas digunakan. Dan dengan cara ini pengiraan peratusan setiap elemen dalam bekas global DIV dilakukan. Yang seperti yang dinyatakan di atas mempunyai lebar 1080 piksel. Menukarkan ukuran tersebut kepada nilai peratusan, maka sintaks berikut diperoleh:

#utama #kandungan { float:left; lebar:63.9880952%; margin:30px 0 0 1.98412698%; }

[...]

#utama #bar sisi { float:left; margin:20px 0 0 3.47222222%; lebar:28.7698413%; }

Seperti yang dapat dilihat, kedua-dua lebar dan jidar mendatar telah diubah. Dengan cara ini laman web akan mengekalkan rupa segi empat sama. Satu lagi perkara penting yang perlu diberi perhatian ialah bilangan perpuluhan yang ditunjukkan dalam peratusan. Yang tujuannya ialah pengiraan setepat mungkin kepada nilai asal dalam piksel.

Penyelesaian untuk elemen dalaman longgar yang meningkat dalam saiz

Dalam proses mengubah halaman web, adalah mungkin untuk mencari elemen longgar tertentu dalam model yang, disebabkan tipologinya, boleh berkembang melebihi bekas global maksimumnya, lebar maksimum. Elemen ini boleh dikesan dengan bermain dengan saiz pelayar, kerana ia dikesan ia diperbetulkan. Satu lagi cara cepat untuk membetulkan atau mengelakkan unsur-unsur ini adalah dengan memilih bekas dan memberi perintah bahawa tiada unsur dalam tumbuh melebihi saiz bekas itu sendiri.

Dalam contoh yang sedang dibangunkan, bentuk pembetulan terakhir ini digunakan, dalam kandungan utama dan bar sisi. Oleh itu, masalah tertentu yang mungkin timbul daripada widget boleh diselesaikan sendiri. Mengikut ini, konfigurasi untuk menyelesaikan elemen dalaman yang longgar adalah seperti berikut:

#utama #kandungan { float:left; lebar:63.9880952%; margin:30px 0 0 1.98412698%; }

#utama #kandungan * {maks-lebar:100%}

[...]

#utama #bar sisi { float:left; margin:20px 0 0 3.47222222%; lebar:28.7698413%; }

#utama #bar sisi * {max-width:100%}

Elemen Diletakkan dalam Mutlak

Untuk semua elemen yang diletakkan pada semua dalam halaman web untuk berubah. Proses sebelumnya yang sama mesti digunakan pada mereka dengan lebar, menyesuaikannya dengan nilai dalam peratusan pada paksi abscissa untuk mengubah lebarnya. Dengan mengandaikan bahawa dalam contoh yang sedang dibangunkan, terdapat beberapa elemen diletakkan sama sekali dalam pengepala. Kedudukan mereka mesti disesuaikan dengan unsur-unsur ini, supaya ia tidak kekal terapung di udara apabila dimensi web dikurangkan. Untuk ini, konfigurasi adalah seperti berikut:

[...]

#header #p.breadcrumb atas {kedudukan:mutlak; atas:90px; kiri: 3.72439479%; warna:putih;}

[...]

#header #top p.like { position:absolute; atas:10px; kiri:54.0037244%; }

[...]

#header #top div.vcard{position:absolute; atas:11px; kanan: 5.49348231%; lebar:27.9329609%;}

Menggunakan Pertanyaan Media dalam elemen dalaman

Apabila menyesuaikan lebar halaman, ada kemungkinan terdapat elemen yang, disebabkan kandungannya, tidak menemui ruang dalam reka bentuk semula. Ini boleh menghalang, dengan membuat penyesuaian kelihatan buruk. Untuk mengelakkan situasi janggal ini, pertanyaan media mudah digunakan yang membenarkan pengubahsuaian drastik CSS, apabila beberapa dimensi tertentu berlaku.

Pertanyaan media ialah alat yang sangat berkuasa yang dengannya banyak artifisial boleh dibuat. Kali ini ia akan digunakan untuk menentukan syarat tertentu mengenai lebar skrin, dan dari mana CSS akan berubah. Untuk ini kami akan mengingati sintaks berikut:

@media skrin dan (lebar maksimum:[WIDTH]px) {

/* Peraturan baharu kami dengan lebar skrin ini atau kurang */

}

Kenyataan pertanyaan media ini secara khusus berusaha untuk menyesuaikan reka letak kepada resolusi yang berbeza. Jadi ia boleh digunakan lebih daripada apa-apa untuk menyembunyikan elemen sekunder tertentu, yang, memandangkan lebar skrin tertentu, boleh menjengkelkan lebih daripada membantu pengguna. Selain berkhidmat untuk membuat gandingan kecil, supaya beberapa elemen boleh dimuatkan dalam reka bentuk semula dalam senario yang berbeza.

Sebagai contoh apa yang telah diperkatakan, beberapa elemen peleraian di bawah 800 dan 600 piksel akan disembunyikan. Bahawa dalam satu kes mereka menghalang pandangan yang betul tentang kandungan halaman utama laman web untuk disesuaikan. Mengikut sintaks berikut:

@media skrin dan (lebar maksimum: 800px) {

#header #p.like atas,

#header #p.crumb atas,

#header #top div.vcard p.twitter,

#header #top div.vcard p.linkedin,

#header #top div.vcard p.delicious,

#header #top div.vcard p.google,

.vcard h2{ display:none;}

}

@media skrin dan (lebar maksimum: 600px) {

#sidebar .twitter {display:none;}

}

Seperti yang dapat dilihat, ia disembunyikan dalam resolusi kurang daripada 800 piksel:

-Kesukaan

- serbuk roti

-Butang sosial, antara lain

Daripada 600 piksel ke bawah, tweet terakhir sedang dialih keluar dari bar sisi

Pertanyaan Media juga membenarkan anda mengubah suai beberapa gaya

Seperti yang anda sudah lihat, pertanyaan media membolehkan anda menyembunyikan beberapa elemen dalaman. Tetapi mereka juga membenarkan anda membuat perubahan pada beberapa gaya. Keistimewaan ini boleh digunakan jika elemen, selain tidak disesuaikan dari segi lebar, tidak dikehendaki atau tidak mahu dibuat hilang atau disembunyikan. Jika situasi ini timbul di web yang anda ingin ubah. Kemudian, melalui penggunaan pertanyaan media, ia akan dicari untuk mengubah gayanya secara halus, supaya ia menyesuaikan diri.

Dengan mengandaikan bahawa pada web yang sedang diusahakan, butang sosial menyebabkan masalah jenis ini. Dan ia memutuskan untuk menukar pemformatannya secara halus, dengan mengalih keluar ikon dan mengecilkan saiz fon, apabila halaman turun di bawah 960 piksel lebar. Konfigurasi kemudiannya adalah seperti berikut:

skrin @media dan (lebar maksimum:960px) {

#header #top div.vcard p {font-size:9px;}

#header #top div.vcard p.twitter ke,

#header #top div.vcard p.linkedin a ,

#header #top div.vcard p.delicious a,

#header #top div.vcard p.google a {background:none; padding:0;lebar:50%; float: left;}

}

Apa yang perlu dilakukan dengan menu

Bagaimana pula dengan menu, dalam proses cara membuat tapak web responsif pada skrin kecil? Jawapan kepada soalan ini adalah bahawa ia adalah masalah yang agak kompleks untuk diselesaikan. Kerana ia adalah satu set elemen yang biasanya agak panjang, dan juga menu itu sendiri, ia bukanlah kandungan utama web. Oleh itu, tidak boleh dibenarkan apabila halaman dibuka pada skrin kecil, menu tersebut menempati banyak ruang.

Dalam peranti sentuh, ia boleh menjengkelkan bagi pengguna, bahawa senarai pautan kecil muncul, jadi mengecilkan pautan tidak akan menjadi penyelesaian yang paling berdaya maju. Alternatif yang boleh menguntungkan ialah menggantikan menu dengan elemen pilih. Yang mewakili kawalan yang menunjukkan menu pilihan, di mana pengguna boleh memilih dengan selesa. Elemen pilih mengurangkan penyenaraian menu yang panjang menjadi blok kecil, jadi penggunaannya sesuai untuk peranti seperti tablet dan mudah alih.

Apabila melakukan penggantian ini dalam reka bentuk responsif baharu adalah disyorkan untuk menggunakan pemalam tinynav jquery. Yang mudah dan sangat serasi, pemalam ini merujuk kepada semua item UL dalam menu. Dan ini seterusnya menambah elemen pilih pada permulaan senarai dengan ciri yang ditunjukkan. Selepas itu, langkah yang perlu dilakukan ialah menyembunyikan UL atau pilihan dengan pertanyaan media, sehingga penyelesaian yang menguntungkan dicapai.

Prosedur dengan elemen pilih

Prosedur menggantikan menu dengan elemen pilih akan dilakukan melalui pemalam yang dinyatakan di atas. Yang harus diletakkan dalam tajuk pada senarai pautan. Jadi, apabila halaman mula turun ke resolusi kurang daripada 800 piksel lebar, pautan akan digantikan dengan pilihan. Kemudian ia adalah untuk mengikuti langkah-langkah berikut:

• Tambah skrip dan dalam pemalam jquery sedia tetapkan panggilan ke elemen baharu. Mengikut perkara berikut:

$(".menu ul").tinyNav();

Konfigurasi ini menambahkan pilihan dalam setiap penyenaraian pautan dalam menu atas

• Beritahu CSS asas untuk menyembunyikan elemen pilih baharu, dengan pengisytiharan berikut:

.tinynav { paparan: tiada }

• Gunakan pertanyaan media yang sesuai dan di dalamnya tambahkan format pilihan dan perintah untuk menyembunyikan senarai itu sendiri. Meninggalkan konfigurasi seperti berikut:

@media skrin dan (lebar maksimum: 800px) {

#header ul.menu li ul {display:none}

.tinynav { paparan: blok; kedudukan:mutlak; bawah:5px; lebar: 79%; jidar kiri:15%}

}

Dengan cara ini, menu web akan digantikan dengan elemen pilihan, dengan menurunkan resolusi skrin kepada kurang daripada 800 piksel lebar.

Sekat Latar Belakang dalam cara membuat Web Responsif 

Pada ketika ini dalam penyesuaian web, bergantung pada bagaimana model itu, tahap kesukarannya. Apabila mereka bentuk web, pada titik CSS, blok biasanya dihiasi dengan latar belakang imej. Sebilangan besar teknik digunakan dalam proses hiasan. Sebahagian daripadanya lebih mudah daripada yang lain apabila ia berkaitan dengan mengubah saiz.

Beberapa penyelesaian

Inilah sebabnya, bergantung pada teknik yang digunakan, prosedur mungkin kurang atau lebih mudah. Malah mungkin berlaku bahawa latar belakang yang ada pada web, kehilangan objektifnya apabila bahagian tepinya disembunyikan. Mengakibatkan kes-kes ini masalah besar untuk diatasi. Berikut adalah beberapa penyelesaian untuk ini:

• Ubah suai seberapa banyak latar belakang yang mungkin kepada gaya CSS3. Yang akan menyesuaikan diri dengan baik dengan perubahan. Kini mudah untuk mendapatkan kebanyakan penyemak imbas serasi, apabila menggunakan tepi bulat, bayang-bayang atau kecerunan. Dengan tiga situasi CSS adalah sukar untuk reka bentuk memerlukan sejumlah besar imej untuk membentuk blok.
• Lakukan tanpa imej latar belakang, untuk menggantikannya sebanyak mungkin dengan CSS3 yang paling hampir dengan cara pertanyaan media dan lebar penyesuaian melakukan tugas mereka
• Jika kes dana yang sudah menguasai keadaan sesebuah blok. Adalah disyorkan untuk menduplikasi gaya ini dalam blok dan pastikan latar belakang asal sedikit dibezakan

Penyelesaian lain kepada tiga jenis imej latar belakang yang boleh menjengkelkan ialah:

• Imej dengan sempadan dalam bingkai halaman, walaupun kekal di luar bahagian yang dipaparkan, hasil akhir tidak mengganggu, oleh itu ia dibiarkan
• Ikon dalam tajuk tertentu, yang diperbaiki dengan menyembunyikannya dengan pertanyaan media apabila ia mula menjengkelkan
• Latar belakang global pengepala memang termasuk kotak putih tempat nama pengarang web pergi. Untuk ini, gaya yang sama boleh diulang dalam kotak pengarang supaya satu latar belakang tersembunyi dengan latar belakang yang lain dengan mengurangkan dimensi halaman.

Cara membuat Web Responsif untuk skrin mudah alih – Penyelesaian

Beberapa aspek cara membuat tapak web responsif pada skrin kecil telah pun dilihat sebelum ini. Dengan pengetahuan ini, anda boleh beralih daripada reka bentuk web tegar dengan lebar tetap 1080 piksel kepada reka bentuk yang agak boleh disesuaikan dengan skrin kecil, daripada sejumlah besar peranti. Tetapi penyelesaian reka bentuk responsif untuk skrin mudah alih tiada.

Dengan aplikasi apa yang dilihat untuk skrin kecil dalam reka bentuk untuk mudah alih, perubahan menjadikannya kelihatan boleh diterima. Lebih banyak lagi perlu disempurnakan, memandangkan susun atur dua lajur dengan unsur-unsur teragregat dalam pengepala adalah sangat tidak praktikal untuk telefon bimbit

Oleh itu, adalah wajar untuk memulakan proses untuk mencapai paparan yang betul pada peranti mudah alih. Adalah penting untuk ambil perhatian bahawa penggunaan navigasi pada mudah alih tidak sama seperti pada tapak web biasa. Anda kemudiannya mungkin ingin pergi lebih jauh daripada perubahan kebolehsuaian lebar skrin ringkas atau penyembunyian elemen.

Teg Viewport dalam kes ini

Elemen viewport ialah alat yang baik untuk menyesuaikan web kepada mudah alih. Pertama, kerana port pandangan berfungsi untuk menunjukkan kepada mudah alih cara anda mahu zumnya berfungsi, apabila peranti memaparkan tapak web. Yang berkata, pada dasarnya dua pilihan boleh dibentangkan, ditunjukkan di bawah:

Pilihan 1: Untuk tapak web dengan reka bentuk responsif yang digabungkan dengan resolusi mudah alih secukupnya, perkara berikut tersedia:

Pilihan ini adalah yang paling ideal, tetapi juga yang paling susah payah. Kerana apabila anda mengurangkan lebar lajur di bawah 500 atau 400 piksel, lebar menjadi tidak terurus sama sekali. Oleh itu, perubahan radikal perlu dibuat dalam visualisasi web.

Pilihan 2: Jika ini adalah kes tapak web yang masih belum disesuaikan dengan sempurna kepada resolusi mudah alih, kami mempunyai perkara berikut:

Pilihan lain ini mungkin lebih pantas. Kerana ia hanya ditunjukkan dalam reka bentuk bahawa mudah alih boleh dipaparkan dalam resolusi yang dikehendaki. Dalam erti kata lain, web akan terus menjadi halaman biasa, hanya dalam versi yang lebih kecil atau disesuaikan.

Kemungkinan akibatnya

Jika anda memilih pilihan kedua, dua masalah mungkin timbul dengan tapak web untuk disesuaikan atau direka bentuk responsif.

-Pertama: Port pandangan dalam kes ini akan berfungsi secara global dalam semua penyemak imbas mudah alih. Memandangkan kes itu, sebagai contoh, bahawa teg port pandang selebar 500 piksel ditunjukkan, ia akan menyebabkan peranti iPad dengan lebar sekitar 800 piksel memaparkan halaman hanya 500 piksel lebar. Gagal memanfaatkan seratus peratus ruang yang ada.

-Kedua: Meneruskan kes menunjukkan port pandang selebar 500 piksel. Dalam kes ini, resolusi 320 piksel lebar, kandungan web yang sedang diusahakan akan dipaparkan dalam mod yang sangat berkurangan. Oleh itu, jika beberapa pelarasan tidak dibuat, ia akan menjadi tidak berfungsi. Sebaliknya, jika pelarasan tertentu dibuat untuk menyesuaikan menu atau sumber, versi web akan diubah suai dengan cara yang sama untuk dipaparkan pada tablet, dalam kes skrin kecil. Kesimpulannya, penyelesaian untuk menunjukkan lebar tetap dengan tag viewport mungkin yang terpantas, tetapi ia tidak lagi cekap.

Melihat akibat daripada memilih pilihan 2 teg port pandangan, menjadikan pilihan 1 paling disyorkan. Dengan cara ini, mudah alih itu sendiri dibenarkan untuk menunjukkan resolusi yang ia mampu, apabila menggunakan port pandangan yang ditunjukkan di atas sebagai pilihan 1 dalam Ketua halaman.

Dengan keputusan visualisasi ini, ia kemudiannya untuk mengerjakan pertanyaan media, untuk versi mudah alih. Ini memerlukan pergerakan dari lajur ke blok dengan lebar seratus peratus. Padamkan juga, mampatkan elemen tertentu, laraskan fon supaya mesra bacaan pada lebar 320 piksel.

mengalih keluar lajur

Seperti yang dinyatakan di atas, untuk penyesuaian responsif mudah alih, reka bentuk perlu disempurnakan dalam penampilan dua lajur untuk mengelakkan gumpalan elemen dalam pengepala. Untuk proses ini, lajur akan dihapuskan dengan meletakkan satu bertindih pada satu lagi, tetapi terdapat dua senario yang boleh berlaku:

-Bahawa lajur sudah dipesan dalam Html: Jika ini berlaku, ia telah pun dibentangkan dalam cara yang diingini untuk mudah alih. Ia hanya perlu untuk membuat Floats hilang atau mengubah suai display:inline-block atau display:box, untuk menggantikannya dengan paparan:block biasa. Dengan menggunakan sintaks berikut:

@media skrin dan (lebar maksimum: 400px) {

#content {display:block; float:none; }

}

-Jika lajur tidak dipesan: Dalam senario ini, anda mesti bekerja dengan kedudukan mutlak supaya blok bawah menduduki bahagian atas halaman. Serta menggunakan margin untuk memindahkan blok atas ke bawah, supaya ia tidak bertindih. Contoh, dengan mengandaikan pengedaran berikut:

Dalam penstrukturan ini, adalah diingini bahawa pada mudah alih unsur-unsur bar sisi bar sisi terletak sebelum kandungan. Kemudian CSS dibentangkan seperti berikut:

@media skrin dan (lebar maksimum: 400px) {

#utama {kedudukan:relatif; lebar: 100%; }

#content{margin-top:80px; lebar: 100%; float:none;}

#bar sisi{height:80px; kedudukan:mutlak; atas:0; lebar: 100%; float:none; }

}

Untuk menggambarkan senario kedua, di mana kedudukan mutlak perlu digunakan dalam versi mudah alih, contoh struktur berikut dibentangkan

@media skrin dan (lebar maksimum: 450px) {

#utama #bar sisi {display:block; float:tiada !penting; lebar: 100%; kedudukan:mutlak; atas:-80px; margin:0 !penting; sempadan-bawah:1px pepejal #aaa; padding:0 0 20px 0;}

#utama #kandungan { float: none; lebar:auto; jidar:100px 0 0 0; }

}

Dalam kes ini terdapat juga perubahan kepada 450 piksel lebar dalam versi mudah alih.

Melaraskan Fon

Satu lagi aspek yang mesti ditangani dalam penyesuaian responsif dalam versi mudah alih ialah pelarasan fon. Kerana, apabila web direka bentuk, ia dibuat dengan mempertimbangkan monitor besar. Apabila beralih ke versi mudah alih yang mempunyai skrin menegak kecil, tapak web selalunya tidak selesa untuk dibaca atau dilihat. Tajuk utama web mengambil banyak ruang, teks kandungan, disebabkan saiz fon, menjadikannya sukar untuk dibaca. Menurut ini, adalah perlu untuk menyemak semua sumber, membawanya ke konfigurasi yang berdaya maju untuk dipaparkan pada skrin mudah alih.

Di bawah adalah pelarasan mengenai aspek ini, di mana fon menu diubah suai, saiz fon tajuk dikurangkan dan kandungannya ditambah. Perhatikan konfigurasi berikut:

  #header ul.menu li,

#header ul.menu li.analytics,

#header ul.menu li.development {background:none;}

#header ul.menu li h4 {margin:30px 0 0 0px; saiz fon:12px; inden teks:10%;}

#utama #kandungan .hnews h3 a,

#main #content .hnews h1 a{ font-size:22px; }

#main #content .hnews .entry-content {font-size:16px;}

Pelarasan lain dari segi estetika dan gaya

Saya telah melakukan semua proses sebelumnya tentang cara membuat laman web responsif dalam reka bentuk untuk versi mudah alih. Apa yang tinggal ialah meletakkan sentuhan akhir pada penampilan dan gaya web. Dalam kes ini, anda boleh mereka semula gaya yang tidak menyesuaikan diri dengan versi baharu dan membuang gaya yang mendapat tempat di dalamnya. Dengan cara yang sama, anda boleh mengalihkan beberapa elemen seperti bar sisi, sebagai contoh, untuk meletakkannya di lokasi lain, atau juga membuat perubahan pada jidar, antara pelarasan lain. Untuk akhirnya mencapai web mudah alih yang cantik sedia untuk digunakan.

Bagaimana untuk membuat Laman Web Responsif? - Ujian dan ujian

Apabila anda mereka bentuk bukan sahaja dari segi pembangunan web, tetapi dalam sebarang penciptaan atau penstrukturan sesuatu yang baharu. Terdapat peringkat ujian atau ujian, di mana anda boleh menyemak keputusan, jika ia optimum atau memerlukan penambahbaikan.

Walau bagaimanapun, adalah mudah untuk menjalankan pemeriksaan atau ujian selepas melaksanakan semua prosedur sebelumnya. Ujian ini harus dijalankan semasa langkah-langkah dilaksanakan dan dapat mengesahkan perubahan yang sedang dicapai dalam setiap satu. Dengan cara yang sama, adalah perlu untuk menjalankan dua semakan berikut dalam pengendalian web

Pergi menguji dalam penyemak imbas

Semasa anda mengusahakan reka bentuk responsif, anda mesti melaraskan lebar skrin. Untuk menyemak penyesuaian baharu, yang mengambil bentuk baharu. Dengan cara yang sama, ralat kecil boleh dikesan dan dengan itu dapat membuat pelarasan pada pertanyaan media yang digunakan. Untuk menyemak lebar skrin, terdapat dua cara untuk melakukannya:

• Bertindak secara langsung dengan mengalih keluar pemaksimuman penyemak imbas untuk menguji lebarnya.
• Gunakan perkara seperti ISH sebagai alat yang berguna untuk menjalankan tetapan ujian ini dengan arahan mudah.

Pintas cache mudah alih

Peranti mudah alih mengikut sifat semula jadinya data cache melebihi apa yang diperlukan, malah lebih daripada pelayar biasa. Dalam yang biasa, ia biasanya cukup untuk melaksanakan CTRL+F5 untuk mendorong beban tanpa cache. Walaupun jenis tindakan ini sukar pada telefon mudah alih, malah pelayar tertentu mempunyai pilihan untuk melumpuhkan cache. Untuk memudahkan kerja yang lebih baik tanpa cache, perkara berikut disyorkan:

• Bekerja dengan pembolehubah dalam panggilan Css, seperti:

"/styles.css?version=xxxx"

Membuat pengubahsuaian dalam setiap kes tertentu nombor versi. Agar URL berbeza supaya ia tidak menggunakan cache.

• Bekerja secara langsung dalam penyemak imbas. Perlahan-lahan meningkatkan peleraian mudah alih minimum, antara 420 dan 450 piksel. Dengan cara ini anda boleh menyebabkan ia dipaparkan dalam penyemak imbas dengan cukup mengecil. Cara lain ialah melalui penggunaan alat yang mengubah saiz halaman web.

Dengan tindakan ini, tanpa ragu-ragu, hasil yang lebih praktikal dan selesa akan diperoleh apabila menjalankan ujian.

Bagaimana untuk Membuat Laman Web Responsif? - Kesimpulan

Dalam semua perkara di atas adalah mungkin untuk mengetahui beberapa teknik, alat teknologi dan prosedur yang kerap digunakan dalam reka bentuk web responsif. Semua pengetahuan ini juga boleh digunakan pada tapak web sedia ada yang ingin anda bawa kepada reka bentuk penyesuaian. Tanpa perlu berusaha membina laman web baharu.

Oleh itu, kepada soalan seterusnya: Melakukan semua yang telah anda pelajari, adakah mungkin untuk membuat laman web dengan reka bentuk responsif? Jelas sekali jawapannya adalah No. kenapa? Kerana ia hanya mungkin untuk menjadikan tapak web sensitif kepada penyesuaian, yang pada asalnya tidak. Oleh kerana ia dikandung di bawah sifat yang tegar atau tetap.

Kemungkinan akibat atau kesilapan

Semasa proses menyesuaikan laman web tradisional atau yang lebih sensitif kepada perubahan, ia boleh menyebabkan beberapa kesilapan dan oleh itu akibat tertentu akan timbul, mari lihat:

-Elemen tertentu perlu dihapuskan yang sangat penting semasa halaman dibuat. Sebaliknya, tindakan menghapuskan mereka dilakukan berdasarkan penampilan dan bukan kerana kepentingan kandungan untuk dihantar kepada pelawat web.

-Ia mungkin tidak mencapai kesempurnaan dalam keseluruhan aspek visual. Hanya mampu memperbaiki yang sedia ada. Kes yang sama sekali berbeza jika web dicipta dari awal.

-Bergantung pada model tapak web asal, ia mungkin atau mungkin tidak mencapai penghujung penyesuaian kepada perubahan. Dengan beberapa mockup pembangun dalam percubaan ini, hanya akan dapat membuat penyelesaian perantaraan.

Akhirnya mengenai reka bentuk responsif

Akhirnya, apa yang dijalankan hanyalah butiran ringkas. Menyerlahkan kepentingan bekerja untuk mendapatkan model yang boleh disesuaikan dengan reka bentuk yang bukan asalnya. Apabila anda membaca Reka Bentuk Responsif, anda memahami bahawa anda bercakap tentang reka bentuk dan bukan tentang kerja susun atur. Oleh itu, cara membuat laman web responsif mestilah berasal dari konteks reka bentuk baharu yang asli.

Walau bagaimanapun, dapat memaparkan laman web yang boleh berubah dan menyesuaikan diri dengan resolusi mudah alih, bermula dari yang tegar, adalah pencapaian yang agak besar dan berguna. Apa yang dijelaskan di sini tidak menunjukkan bahawa anda sudah terlatih dalam reka bentuk responsif. Untuk ini, lebih banyak kajian diperlukan.

Oleh kerana lebih banyak asas, pengetahuan dan pembelajaran berbeza yang lebih umum, lebih banyak proses teknikal diperlukan.

Cara membuat Laman Web Responsif – Petua Akhir

Untuk membuat kesimpulan, adalah penting untuk mengetahui bahawa reka bentuk responsif ialah perkara semasa di web. Reka bentuk web jenis ini memerlukan cara pemikiran baharu. Membangunkan tapak web ini boleh menjadi lebih mudah dengan mengikuti petua berikut:

• Fikirkan mudah alih dahulu: Apabila mereka bentuk, adalah mudah untuk bermula dahulu dengan menyesuaikan diri dengan saiz kecil skrin mudah alih. Oleh itu, selepas melaraskan kandungan ke skrin dengan saiz yang lebih besar. Kerana, apabila mereka bentuk dengan mengambil kira telefon bimbit, anda boleh menjadi lebih objektif dengan kandungan yang sepatutnya dipaparkan pada halaman, hanya meninggalkan apa yang benar-benar penting untuk dibentangkan.
• JANGAN mengoptimumkan reka bentuk untuk mudah alih atau tablet tertentu
• Ikut piawaian dan amalan baik: Contohnya, tidak menggunakan gaya CSS yang ditakrifkan dalam fail itu sendiri, dalam teg Html.
• Elakkan menjadi hamba kepada piksel dalam reka bentuk: Perlu diingat bahawa elemen mencari kedudukan yang sepadan dengannya. Ini kerana mereka mengambil kira kecairan bekas dan dimensi. Apabila ia tidak dipaparkan seperti yang dikehendaki, betulkan susun atur elemen dengan menggunakan pertanyaan media.