Cecair semua yang lain

kita semua tahu reka bentuk responsif, bukan? Kami menggunakan media untuk pertanyaan. Tidak, sekarang kami telah menggunakan bekas untuk pertanyaan, bukan? Kadang -kadang kita menggunakan flexbox atau streaming automatik mesh bijak. Jika kita mahu menjadi lebih berani, kita juga boleh mencuba tipografi cecair.

Saya agak tidak biasa dengan reka bentuk responsif yang sering dibahagikan kepada blok diskret, seperti "susun atur A ke saiz ini, kemudian susun atur B sehingga terdapat ruang yang cukup untuk susun atur C". Ini OK, ia berfungsi dan sesuai untuk aliran kerja merancang skrin sebagai susun atur statik dalam Photofigva (penafian, saya membuat nama perisian). Tetapi proses ini seolah -olah saya menjadi kompromi. Saya selalu percaya bahawa reka bentuk responsif harus hampir tidak dapat dilihat oleh pengguna. Apabila mereka dibariskan untuk membeli tiket K-pop dan melawat laman web saya di telefon bimbit, mereka tidak sepatutnya melihat betapa berbeza dari pengalaman duduk di monitor permainan melengkung yang besar, mereka meyakinkan bos mereka memerlukan satu jam yang lalu.

Pertimbangkan spanduk wira mudah ini dan setara mudah alihnya. Maaf, reka bentuknya kasar. Imej dihasilkan oleh AI, tetapi ini adalah satu -satunya bahagian AI yang dihasilkan dari artikel ini.

Lokasi dan saiz mongoose dan teks adalah berbeza. Cara tradisional untuk mencapai matlamat ini ialah memilih dua susun atur menggunakan pertanyaan

(maaf, kontena). Setiap susun atur mungkin mempunyai beberapa fleksibiliti, seperti kandungan yang berpusat, dan sedikit tipografi cecair pada saiz fon, tetapi kami akan memilih titik di mana kami akan menukar susun atur ke dalam dan keluar dari versi yang disusun. Oleh itu, pada lebar berhampiran titik putus, susun atur mungkin kelihatan sedikit kosong atau sedikit sesak. <del>媒体</del>

ada cara lain?

fakta telah membuktikan bahawa

mempunyai . Kita boleh menggunakan konsep penapisan cecair kepada hampir apa sahaja. Dengan cara ini, kita boleh mempunyai susun atur yang berubah lancar dengan saiz bekas induknya. Beberapa pengguna akan melihat peralihan, tetapi mereka akan menghargai hasilnya. Sejujurnya, mereka akan.

Mula gaya reka bentuk

Langkah pertama, mari gaya susun atur secara berasingan, sedikit seperti ketika kita menggunakan pertanyaan lebar dan titik putus. Malah, mari kita gunakan pertanyaan kontena dan titik putus bersama supaya kita dapat dengan mudah melihat sifat -sifat yang perlu diubah.

Ini adalah tanda sepanduk wira kami, ia tidak akan berubah:

<div>
  <div>
    <h1 id="LookOut">LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

Ini adalah CSS yang berkaitan dengan versi yang luas:

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

Saya menambahkan imej latar belakang ke pseudo-elemen

supaya saya boleh menggunakan pertanyaan kontena di atasnya (kerana bekas tidak dapat menanyakannya sendiri). Kami akan menyimpannya kemudian supaya kami dapat menanyakan unit (CQI) menggunakan bekas sebaris. Sekarang, inilah pertanyaan kontena yang hanya menunjukkan nilai yang akan kita lancar: ::before

@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}

Anda dapat melihat kod yang berjalan dalam demo secara langsung - ia benar -benar statik untuk menunjukkan batasan pendekatan biasa.

mari kita lancar

Sekarang kita boleh mendapatkan titik permulaan dan akhir saiz dan kedudukan teks dan latar belakang dan menjadikannya lancar. Saiz teks menggunakan tipografi cecair dengan cara yang anda sudah biasa. Berikut adalah hasilnya - saya akan menerangkan ungkapan ini selepas anda melihat kod tersebut.

pertama adalah perubahan kedudukan teks dan saiz:

<div>
  <div>
    <h1 id="LookOut">LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

Ini adalah kedudukan latar belakang dan saiz imej Mongolia:

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

Sekarang kita boleh memadamkan pertanyaan kontena sepenuhnya.

mari kita jelaskan ungkapan clamp() ini. Kami akan bermula dengan ungkapan atribut top.

@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}

anda akan melihat ada komen di sana. Ekspresi ini adalah idea yang baik tentang mengapa nombor sihir tidak baik. Tetapi kita tidak boleh mengelakkan mereka di sini kerana mereka adalah penyelesaian kepada beberapa persamaan serentak - CSS tidak boleh melakukannya!

Had atas dan bawah yang diluluskan kepada

cukup jelas, tetapi ungkapan di tengah -tengah berasal dari persamaan serentak ini: clamp()

/* 行更改
 * -12,27 +12,32
 */

.details {
  /* ... 行 14-16 未更改 */
  /* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */
  top: clamp(50px, 20.238cqi - 22.857px, 220px);

  /* 对 360px 宽的容器计算结果为 20px，对 1200px 宽的容器计算结果为 565px */
  left: clamp(20px, 64.881cqi - 213.571px, 565px);

  /* ... 行 20-25 未更改 */
  h1 {
    /* 对 360px 宽的容器计算结果为 3.5rem，对 1200px 宽的容器计算结果为 5rem */
    font-size: clamp(3.5rem, 2.857rem + 2.857cqi, 5rem);
    /* ... 字体粗细未更改 */

  }

  p {
    /* 对 360px 宽的容器计算结果为 2rem，对 1200px 宽的容器计算结果为 2.5rem */
    font-size: clamp(2rem, 1.786rem + 0.952cqi, 2.5rem);
  }
}

... di mana f ialah bilangan unit saiz tetap panjang (iaitu px), dan v ialah unit bersaiz berubah (CQI). Dalam persamaan pertama, kita mengatakan bahawa apabila 1CQI adalah sama dengan 12px, kita mahu ungkapan itu mengira kepada 220px. Dalam persamaan kedua, kita mengatakan bahawa apabila 1CQI adalah 3.6px, kita mahu 50px, dan penyelesaian ini adalah:

/* 行更改
 * -50,3 +55,8
 */

/* 对 360px 宽的容器计算结果为 -310px，对 1200px 宽的容器计算结果为 0px */
background-position-x: clamp(-310px, 36.905cqi - 442.857px, 0px);
/* 对 360px 宽的容器计算结果为 -25px，对 1200px 宽的容器计算结果为 0px */
background-position-y: clamp(-25px, 2.976cqi);
/* 对 360px 宽的容器计算结果为 710px，对 1200px 宽的容器计算结果为 589px */
background-size: auto clamp(589px, 761.857px - 14.405cqi, 710px);

... ini disusun menjadi ungkapan mesra pengiraan:

. 20.238cqi – 22.857px

Apabila unit tetap berbeza, kita mesti mengubah saiz unit pembolehubah dengan sewajarnya. Oleh itu, untuk saiz fon elemen

, kita ada; <h1></h1>

======================================================================================================================================================================

/* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */
top: clamp(50px, 20.238cqi - 22.857px, 220px);

Ini menyelesaikan persamaan ini, kerana 1CQI adalah sama dengan 0.75REM apabila lebar kontena adalah 1200px (REM saya relatif terhadap stylesheet UA lalai, 16px), manakala 1CQI adalah 0.225REM apabila lebar 360px.

Harus diingat bahawa persamaan adalah berbeza bergantung pada unit matlamat anda.

<code>f + 12v = 220
f + 3.6v = 50</code>

jujur, ia membosankan untuk melakukan matematik yang membosankan ini setiap kali, jadi saya membuat kalkulator yang boleh anda gunakan. Bukan sahaja menyelesaikan persamaan untuk anda (tepat sehingga tiga tempat perpuluhan untuk memastikan CSS anda kemas), ia juga memberikan komen berguna untuk digunakan dengan ekspresi supaya anda dapat melihat di mana mereka datang dan mengelakkan nombor sihir. Jangan ragu untuk menggunakannya. Ya, terdapat banyak kalkulator yang serupa di luar sana, tetapi mereka memberi tumpuan kepada tipografi, jadi (betul) pada unit REM. Jika anda menggunakan preprocessor CSS, anda mungkin boleh pelabuhan JavaScript.

Fungsi

clamp() tidak diperlukan pada masa ini. Dalam setiap kes, sempadan clamp() ditetapkan kepada nilai apabila lebar kontena adalah 360px atau 1200px. Memandangkan bekas itu sendiri terhad kepada sekatan ini - dengan menetapkan nilai dan min-width - ekspresi max-width tidak boleh memanggil mana -mana batas. Walau bagaimanapun, jika kita mengubah fikiran kita (kita akan berbuat demikian), saya lebih suka menyimpan clamp() kerana sempadan tersirat seperti ini sukar dicari dan dikekalkan. clamp()

Elakkan Harm

kita boleh berfikir kerja kita selesai, tetapi kita tidak. Susun atur masih tidak begitu berguna. Teks itu langsung di atas kepala mongoose. Walaupun saya dijamin bahawa ini tidak akan menyakitkan mongoose, saya tidak suka melihatnya. Oleh itu mari kita buat beberapa perubahan untuk menyimpan teks daripada memukul mongoose.

Yang pertama sangat mudah. Kami memindahkan mongoose ke kiri lebih cepat supaya ia membuat jalan. Cara paling mudah ialah mengubah bahagian bawah interpolasi ke bekas yang lebih luas. Kami akan menetapkannya supaya Mongoose bergerak sepenuhnya ke kiri pada 450px, bukannya turun ke 360px. Tidak ada sebab permulaan dan akhir titik semua ekspresi bendalir kita perlu diselaraskan dengan lebar yang sama, jadi kita dapat dengan lancar menurunkan ungkapan lain ke 360px.

dengan kalkulator saya yang boleh dipercayai, kita hanya perlu menukar

ungkapan kedudukan kedudukan latar belakang: clamp()

<div>
  <div>
    <h1 id="LookOut">LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

Ini meningkatkan keadaan, tetapi tidak sepenuhnya. Saya tidak mahu menggerakkannya lebih cepat, jadi seterusnya kita akan melihat jalan ke teks. Pada masa ini ia bergerak dalam garis lurus, seperti yang ditunjukkan di bawah:

Tetapi bolehkah kita membengkokkannya? Ya, kita boleh.

bengkok di jalan

Salah satu cara kita boleh melakukan ini adalah untuk menentukan dua interpolasi yang berbeza untuk koordinat teratas, letakkan garis pada sudut yang berbeza, dan kemudian pilih yang paling kecil. Dengan cara ini, ia membolehkan garis lurus yang lebih curam untuk "menang" pada lebar kontena yang lebih besar, manakala garis lurus cetek menjadi nilai kemenangan apabila lebar kontena kurang daripada kira -kira 780px. Hasilnya adalah garis lurus dengan lengkung, yang merindui mongoose.

kita hanya menukar nilai

, tetapi kita harus terlebih dahulu mengira dua nilai pertengahan: top

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

Untuk nilai -nilai ini, bukannya mengira secara rasmi mereka menggunakan titik tengah yang dipilih dengan teliti, saya mencuba titik akhir sehingga saya mendapat hasil yang saya mahukan. Eksperimen adalah berkesan seperti pengiraan, dan boleh mencapai hasil yang anda perlukan. Dalam kes ini, saya mulakan dengan interpolasi berulang dalam pemboleh ubah tersuai. Saya boleh memecah laluan ke bahagian -bahagian yang jelas menggunakan pertanyaan kontena, tetapi ini tidak mengurangkan overhead matematik, dan menggunakan fungsi

lebih mudah di mata saya. Juga, artikel ini tidak ketat mengenai pertanyaan kontena, bukan? min()

Teks kini bergerak di sepanjang jalan ini. Buka demo langsung untuk melihat bagaimana ia berfungsi.

Titik terakhir penjelasan mengenai pengiraan adalah bahawa terdapat batasan dari segi apa yang kita boleh dan tidak boleh lakukan. Yang pertama, kami telah mengurangkan sedikit, iaitu, interpolasi ini linear. Ini bermakna pudar atau tingkah laku kompleks lain adalah mustahil.

Satu lagi batasan utama ialah CSS hanya dapat menghasilkan nilai panjang dengan cara ini, supaya kelegapan bendalir atau sudut putaran berdasarkan saiz bekas atau viewport tidak boleh digunakan dalam CSS tulen. Preprocessor tidak dapat membantu kami di sini, sama ada kerana batasannya adalah bagaimana calc() berfungsi dalam penyemak imbas.

Jika anda sudah bersedia untuk bergantung kepada sedikit JavaScript, anda boleh membatalkan kedua -dua sekatan. Ia sudah cukup untuk memerhatikan lebar bekas dan menetapkan harta adat CSS tanpa unit. Saya akan menggunakan ini untuk membuat teks mengikuti lengkung bezier kuadratik seperti berikut:

Terdapat terlalu banyak kod yang akan disenaraikan, dan terdapat terlalu banyak penjelasan matematik lengkung Bezier, tetapi sila periksa dalam demonstrasi masa nyata.

Jika ungkapan seperti calc(1vw / 1px) tidak gagal dalam CSS, kita tidak memerlukan JavaScript. Mereka tidak mempunyai alasan untuk gagal kerana mereka mewakili nisbah antara dua panjang. Sama seperti terdapat 2.54 cm dalam 1 inci, apabila lebar viewport adalah 800px, terdapat 8px dalam 1VW, jadi calc(1vw / 1px) harus dikira sebagai 8 nilai tanpa unit.

Tetapi mereka gagal, jadi semua yang kita boleh lakukan ialah menyatakan pandangan kita dan teruskan.

semuanya tidak menyelesaikan semua susun atur

Sudah tentu, selalu ada beberapa susun atur yang memerlukan pertanyaan saiz; Jika sesuai, tidak ada sebab untuk mengelakkan berbuat demikian. Tidak ada sebab untuk mengelakkan pencampuran kedua, contohnya, dengan lancar menyesuaikan saiz dan kedudukan latar belakang semasa menggunakan pertanyaan untuk menukar antara definisi grid penempatan teks. Contoh mongoose saya sengaja direka untuk menjadi mudah untuk tujuan demonstrasi.

Saya ingin menambah bahawa saya sangat teruja tentang kemungkinan kedudukan cecair menggunakan API kedudukan utama yang baru. Adalah mungkin untuk menggunakan kedudukan utama untuk menentukan bagaimana dua elemen mengalir bersama -sama pada skrin, tetapi ini dibiarkan dibincangkan kemudian.

Atas ialah kandungan terperinci Cecair semua yang lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!