MEDIA QUERY

AMIROH, S.KomSMKN 3 JOMBANG

Konsep Media Query Saat ini layout sebuah website telah mengalami

perkembangan dengan menyesuaikan berbagai perangkat yang digunakan untuk mengaksesnya

Misalnya, sebuah website akan menampilkan layout yang berbeda ketika diakses melalui PC desktop dengan layout ketika diakses menggunakan Tablet/HP

Konsep Media Query

Konsep media query inilah yang menjadi dasar berkembangnya Responsive Website yang akhir-akhir ini banyak digunakan oleh web developer

Media query dibuat dengan menggunakan CSS3 yang memungkinkan kita untuk mengubah stylesheet berdasarkan lebar & tinggi perangkat/media yang kita digunakan, seperti PC Desktop atau Tablet atau HP

CONTOH Berikut adalah contoh layout web yang

menggunakan media query:

CONTOH SEDERHANABerikut adalah contoh layout web

sederhana yang memanfaatkan media query:

Background website berwarna Hijau ketika lebar screen full (1024px)

Layout 1

Layout 2

Background website berwarna Merah ketika lebar screen antara 768px -

990px

Layout 3 Background website berwarna Biru ketika lebar screen antara 480px –

768px

Layout 4 Background website berwarna

Kuning ketika lebar screen < 480

Syntax Media query dibuat dengan

menggunakan CSS3 @media dengan penulisan sebagai berikut:

@media <jenis media> and <ukuran media> {Elemen CSS}

Contoh:@media all and (min-width: 768px) and (max-width: 991px) {body {background:red;Color:yellow}}

CONTOH: Layout 1

(Lebar screen > 700px)

Layout 2 (Lebar screen < 700px)

Project 1

Ketentuan: Buatlah sebuah responsive website

dengan tampilan berikut Script dibuat menggunakan HTML5

dan CSS3 Layout website menggunakan

Layout 1 untuk lebar Screen >700px dan Layout 2 untuk lebar Screen < 700px

Gunakan external stylesheet

LAYOUT WEBSITE 1. CITILINK.CO.ID

PROJECT 1 Layout 1

Layout 2

Ketentuan: Menggunakan HTML5 dan

CSS3 Layout website

menggunakan Layout 1 lebar Screen >700px dan Layout 2 untuk lebar Screen < 700px

Gambar logo hilang Tampilan Form melebar Tampilan menu vertical

2. Layout 1 Website https://ib.bri.co.id

Layout 2

Referensi http://

www.w3schools.com/html/html_form_elements.asp

http://www.w3schools.com/html/html_form_attributes.asp

http://www.w3schools.com/html/html_form_input_types.asp