响应式编程笔记

迈不过友情╰ 2022-06-16 06:56 248阅读 0赞

响应式编程笔记：  
目前手机市场暂用笔记非常的高，而如果你不会响应式编程的话，手机适配性将会相当的差。  
我们需要做到：让你的内容能在任何设备上呈现。  
chrome开发者工具有模拟器，可以模拟我们平常需要的设备。  
还可以真机演示，android手机使用方法：[http://www.css88.com/doc/chrome-devtools/remote-debugging/?q=][http_www.css88.com_doc_chrome-devtools_remote-debugging_q]  
还可以使用apache，将我们做的网页放在apache下，通过apache服务器可以访问这些文件。

———————我是分割线——————————-

视窗：浏览器能够显示内容的区域。  
浏览器不是根据显示器像素宽度而工作的。而是根据DIPS（设备独立像素）宽度来决定的。  
DIPs将像素值与实际距离联系起来。  
视窗宽度css像素数=实际像素/DPR（像素比）决定的

———————我是分割线——————————-

一个典型的针对移动端优化的站点包含下面内容：  
  
width为视图窗口宽度，可以设为500（确切像素数），也可以设置为device-width，这个值表示比例为100%屏幕宽度的CSS像素值。

———————我是分割线——————————-

max-width防止溢出

———————我是分割线——————————-

从最小到大的设计，将最重要的内容展示在页面上。  
从小的东西开始有更大的好处就是会考虑性能问题。

———————我是分割线——————————-

媒体查询，断点：当页面在某个大小的时候样式会有些变化（字体变大，间距变大），这个就是断点。

———————我是分割线——————————-

flexbox是一个解决弹性框项目的属性

练习地址：  
流动布局：  
[https://github.com/sunhuwh/front\_end\_workspace/tree/master/pattern-mostly-fluid-quiz-blankcss][https_github.com_sunhuwh_front_end_workspace_tree_master_pattern-mostly-fluid-quiz-blankcss]  
移动端适配：  
[https://github.com/sunhuwh/front\_end\_workspace/tree/master/RWDF%20L2%20Start][https_github.com_sunhuwh_front_end_workspace_tree_master_RWDF_20L2_20Start]

[http_www.css88.com_doc_chrome-devtools_remote-debugging_q]: http://www.css88.com/doc/chrome-devtools/remote-debugging/?q=
[https_github.com_sunhuwh_front_end_workspace_tree_master_pattern-mostly-fluid-quiz-blankcss]: https://github.com/sunhuwh/front_end_workspace/tree/master/pattern-mostly-fluid-quiz-blankcss
[https_github.com_sunhuwh_front_end_workspace_tree_master_RWDF_20L2_20Start]: https://github.com/sunhuwh/front_end_workspace/tree/master/RWDF%20L2%20Start