1.关于手机视口viewport

1.各类视口的介绍
布局视口–layout viewport
可视视口–visual viewport
理想视口–ideal viewport
1.关于手机视口viewport_第1张图片
用户在手机上查看网页的过程,其实是缩放和滑动可视视口显示布局视口不同部分的内容(像用放大镜看书,放大镜是可视视口,书是布局视口,布局视口的大小是不会变化的)
可视视口----用户体验差
理想视口----布局视口在同一个设备上的最佳尺寸
理想视口的使用:
--------------------------------------------------------------------宽度=设备宽度
--------------------------------------------------------------------布局视口宽度,不写为厂商默认值,指定该属性,布局视口为理想视口
百度:

2.响应式网站的设计实践原则
2.1渐进增强 or 优雅降级
2.2大屏幕和小屏幕优先适应哪一个
2.3不管设备大小,应该包含相同的内容
根据设备大小不同,显示不同的内容

3.项目结构下的一些文件
3.1比特虫----在线制作icon图标
3.2humans.txt----官方网站,可以写一些开发者故事,很多网站都有,如github https://github.com/humans.txt
3.3editorconfig.org----规范的配置文件
3.4 .gitnore
3.5LICECENSE.txt----协议文件
3.6Readme.md----项目简介,使用方式,使用链接
3.7 CHANGLOD.md----项目每个版本的更新,说明版本号,更新内容,修复了哪些bug

md----markdown文件,在线编辑markdown文件的网站(dillinger.io)
使用说明
#+空格----表示标题一
##+空格----标题二
###+空格----标题三
共有六级标题
>引用的一段名言
[百度(http://www.baidu.com)]----链接
![百度logo(http://…png)]—图片
-/*表示无序列表
*1.2.3.----*表示有序列表
粗体----双星号,文字加在中间
斜体----单星号,文字夹在中间
粗体加斜体----三个星号,文字夹在中间
表格-----

col col col col
aaa bbb ccc ddd

4.代码的相关知识
4.1ie的条件注释


5.命名方式
class命名方式----中横线 buttoon-alert
js中的命名方式----小驼峰 buttonAlert

6.关于img图片的插入问题
必不可少的图片用img标签插入
可有可无的装饰性图片用标签的style引入,以背景图片的形式

7.ul>li*7
可以用两个类来定义一组列表的样式

class="icon icon-huangyian"
class="icon icon-huangfengping"
icon表示共有的
icon-huangyian表示私有的

8.C3媒体属性简介
width----视口宽度
height----视口高度
device-width----渲染表面的宽度,就是设备屏幕的宽度
device-height----渲染表面的高度,就是设备屏幕的高度
orientation----检查设备处于横向还是纵向
aspect-ratio----基于视口宽度和高度的宽高比,width/height 如16/9,4/3
device-aspect-ratio----渲染表面的宽度,就是设备屏幕的宽度
color----每种颜色的位数 bits 如:min-clolor:16位,8位
resolution----检测屏幕或打印机的分辨率,如 min-resolution:300dpi

你可能感兴趣的:(响应式设计)