$30 off During Our Annual Pro Sale. View Details »

Kyotojs15_-_handy-media-query.pdf

1natsu
January 12, 2019
Technology
1
870

 Kyotojs15_-_handy-media-query.pdf

Kyoto,js 15で話したスライドです
styled-componentsやemotionでメディアクエリをパッとやるという内容で喋りました

1natsu

January 12, 2019
Tweet

More Decks by 1natsu

See All by 1natsu
文脈の多いこのご時世にユーザーフレンドリーなモジュールをnpm-publish - Kyoto.js16
1natsu172
1
160
酒LTスライド
1natsu172
0
140
梅雨を乗り切る-茶LT2
1natsu172
0
170
YUKAGEなんとかしたいハック-茶LT
1natsu172
0
480
Why is NITOMS strongest?-茶LT
1natsu172
3
380
AZUSA for Mac 2011を解説したスライド
1natsu172
0
5k

Other Decks in Technology

See All in Technology
Oracle Base Database Service：サービス概要のご紹介
oracle4engineer
PRO
0
1.6k
忙しい人のためのRocky Linux入門～CentOSの後継者たり得るか？～
zembutsu
PRO
0
330
ネットスーパーの買い物体験を支える工夫と決済機能実現の過程
yamarkz
PRO
0
150
[FIT22] Flareformer: Large-scale Solar Flare Prediction by Integrating Magnetograms and Sunspot Physical Features
keio_smilab
PRO
0
300
ECS Service Connectによるサービスの新しいつなぎ方 / A new way to connect services with ECS Service Connect
iselegant
9
900
OracleのCloud Native 戦略／ソリューションの特徴 / oracle-cloud-native-strategy-overview
oracle4engineer
PRO
1
190
Datadogでシステムとアプリケーション情報を民主化をはじめよう / System and Application information democratize with datadog
vtryo
1
340
BBGO 2022 - Modern Crypto Trading Bot
c9s
0
110
APN AWS Top Engineersが語るAWSの最新セキュリティ
cmusudakeisuke
0
910
EMになって半年でやったこと
yuu26
0
310
Sports Analyst Meetup #13 (2022/11/26)
keisuke198619
0
280
Dojo 20221130 Searching famous Malware
ichikawayasuhisa
0
110

Featured

See All Featured
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.7k
Learning to Love Humans: Emotional Interface Design
aarron
262
38k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
3
490
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.1k
What's new in Ruby 2.0
geeforr
336
30k
Bash Introduction
62gerente
600
210k
Pencils Down: Stop Designing & Start Developing
hursman
113
10k
The Mythical Team-Month
searls
210
40k
Code Review Best Practice
trishagee
48
11k
GraphQLとの向き合い方2022年版
quramy
19
9.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6k
Designing the Hi-DPI Web
ddemaree
273
32k

Transcript

  1. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ ࣗݾ঺հ

  2. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு ࣗݾ঺հ

  3. 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ

  4. ແ 1natsu Θ͔ͬͨͨΊ͕͠ͳ͍ υۓு
 དྷͨͱ͖͸͓ෲݮͬͯͳ͔ͬͨΜͰ͢… ࣗݾ঺հ

  5. $44JO+4Ͱ ϝσΟΞΫΤϦΛ ύοͱ΍Δ

  6. TUZMFEDPNQPOFOUTͰ ϝσΟΞΫΤϦΛ ύοͱ΍Δ

  7. FNPUJPOͰ ϝσΟΞΫΤϦΛ ύοͱ΍Δ

  8. ಥવͰ͕͢

  9. ͜ͷͳ͔ʹ ϝσΟΞΫΤϦͷه๏͕ ύοͱग़Δ͓ํ͸ ͍Βͬ͠Ό͍·͔͢ʁ

  10. ग़Δͻͱ

  11. εΰΠ

  12. ग़ͳ͍ͻͱ

  13. None

  14. ReactͷίϯϙʔωϯτΛ ॻ͍͍ͯͨΜͰ͢Α ͋Δ೔

  15. None

  16. ϝσΟΞΫΤϦͷ ॻ͖͔ͨࣗମ͕ ύοͱΘ͔Βͳ͍

  17. @media all and (max-width: 12450px) { … }

  18. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏

  19. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

  20. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature

  21. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature ίϩϯ

  22. @media all and (max-width: 12450px) { … } ؙׅހͰғ͏ ϓϨϑΟοΫε͸min-͔max-

    ͜Ε͕media-feature ίϩϯ ΫΦʔτͰғΘͳ͍
  23. None

  24. ͦ΋ͦ΋

  25. ຖճॻ͘ͷݫ͍͠

  26. ୯Ґ໰୊͕͋ΔͷͰ emͰॻ͖͍ͨ https://zellwk.com/blog/media-query-units/

  27. ϒϨʔΫϙΠϯτ͸ ͍͍ܾͨͯ·ͬͯ͘ΔͷͰ ཧ૝ͱͯ͠͸͜͏ॻ͖͍ͨ

  28. ίϯϙʔωϯτಠࣗͷ ΞϓϦέʔγϣϯͰ ڞ௨Ͱ͸ͳ͍ہॴతͳ ϝσΟΞΫΤϦ͕ग़͖ͯͨ

  29. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ

  30. ͋Δ͜ͱʹ͸͋Δ

  31. TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ

  32. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ

  33. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒

  34. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒ ࢖͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)

  35. ϒϨʔΫϙΠϯτఆٛ TUZMFEDPNQPOFOUTͷυΩϡϝϯτͷྫ styled-componentsઐ༻ ϝσΟΞΫΤϦϥούʔͳ ΦϒδΣΫτΛ࡞੒ Αͦ͞͏Ͱ͸͋Δ͕…ઐ༻ ࢖͍ͬͯ͘ (ςϯϓϨʔτϦςϥϧ͕ ೖΕࢠʹͳΔ)

  36. FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  37. ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  38. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  39. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰCSSΛॻ͘ ॱ൪͸ϝσΟΞΫΤϦॱ ഑ྻͰϒϨʔΫϙΠϯτ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  40. ϝσΟΞΫΤϦ࡞੒ ഑ྻͰCSSΛॻ͘ ॱ൪͸ϝσΟΞΫΤϦॱ ഑ྻͰϒϨʔΫϙΠϯτ ύοͱΈͯΘ͔ΒΜ͘ͳ͍ʁ FNPUJPOͷGBDFQBJOUΛ࢖͏ྫ

  41. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ

  42. ͳΜ͔ ͏·͍͜ͱ ͳΒΜ͔ͳʙ ͦΜͳ͏·͍࿩͸ͳ͍

  43. ͏·͍͜ͱ ͢Δ͔͠ͳ͍

  44. yarn add @1natsu/handy-media-query

  45. TypeScriptͰॻ͍͍ͯ·͢

  46. None

  47. Α͏͢ΔʹϝσΟΞΫΤϦ͘Μ

  48. Φϓγϣϯ΋͋ΔΑ

  49. None

  50. ͔͍͔ͭͨ

  51. mediaQuery.js

  52. mediaQuery.js ϝσΟΞΫΤϦ͘Μ

  53. mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ

  54. mediaQuery.js ϝσΟΞΫΤϦ͘Μ ϝσΟΞΫΤϦ ͓·ͱΊ͘Μ px→emม׵͘Μ

  55. mediaQuery.js

  56. mediaQuery.js Α͘࢖͏ϒϨʔΫϙΠϯτΛఆٛ (breakpoints.jsΈ͍ͨͳผϑΝΠϧʹ੾Γग़ͯ͠΋OK)

  57. mediaQuery.js

  58. mediaQuery.js value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ

  59. mediaQuery.js খ೉͍͠ϝσΟΞΫΤϦ͸ఘΊͯॻ͘… value͕’@media~’ͷΦϒδΣΫτΛ৯ΘͤΔ

  60. mediaQuery.js ୹໊͍લͰΤΫεϙʔτ͢Δͱศར

  61. None
  62. None

  63. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport

  64. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧ಺ͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢Ε͹OK

  65. ఆٛͨ͠ϝσΟΞΫΤϦΦϒδΣΫτΛimport ςϯϓϨʔτϦςϥϧ಺ͳͷͰ ఆ͓͍ٛͯͨ͠ϝσΟΞΫΤϦΛల։͢Ε͹OK ہॴతͳϒϨʔΫϙΠϯτ͕ग़ͯ΋γϡοͱॻ͚Δ

  66. ൺֱ

  67. ൺֱ

  68. ݟ௨͕͠Α͘ͳͬͯ ͳΜͱͳ͘εοΩϦ

  69. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ

  70. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ

    • mqΦϒδΣΫτΛݟΕ͹Α͍ • ہॴతͳϝσΟΞΫΤϦ΋OK • ݟ௨͕͠Α͘ͳΔ

  71. • ϝσΟΞΫΤϦΛύοͱੜ੒ • pxΛ౉͚ͩ͢ • emʹม׵ࡁΈ • TSϑϨϯυϦʔ • APIͷ౷ҰͰύοͱͳΔ

    • mqΦϒδΣΫτΛݟΕ͹Α͍ • ہॴతͳϝσΟΞΫΤϦ΋OK • ݟ௨͕͠Α͘ͳΔ • ϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍ • CSS in JSଆͷΞοϓσʔτͰ
 ഁ໓͠ͳ͍(͔΋)

  72. ϝσΟΞΫΤϦΛ ύοͱ΍ΕΔΑ͏ʹͳͬͯ ͢͜͠Α͘ͳͬͨ (ݸਓൺ)

  73. ϝσΟΞΫΤϦΛ ύοͱ΍Δ͸ͳ͠Ͱͨ͠ ऴ