响应式网站01
2021-04-14 19:26
标签：兼容 一个 设计师 layout 经理 htm 媒体查询 scala ann 响应式网站概念 弹性网格布局 弹性图片 媒体查询 响应式网站优点 减少工作量 节省时间 网站代码只需要一份 多出来的只是js脚本和css样式 每个设备都能得到正确的设计 搜索优化 响应式网站缺点 加在更多的样式和脚本 设计比较难精准的定位和控制 老版本浏览器兼容性不好 需要掌握技术 浏览器兼容 IE 火狐 谷歌 欧朋 360 媒体查询 width ：视口宽度 height：视口高度 device-width ：设备屏幕的宽度 device-height：设备屏幕的高度 orientation：检查设备处于横向还是纵向 aspect-ratio：基于视口宽度和高度的宽高比 如16/9 或4/3 color：每种颜色的位数 bits 如min-color：16位，8位 resolution：检测屏幕或打印机的分辨率如min-resolution：300dpi 以上属性都可以加min-或max-前缀 viewport视口 width ：视口宽度 device-width ：设备屏幕的宽度 桌面浏览器 只有一个视口就是浏览器显示内容的区域 手机浏览器 布局视口 虚拟宽度不变960以上 可视视口 不可设置修改，用户可以缩放 理想视口 布局视口在一个设备上的最佳尺寸 在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下： 网站开发前工作 和设计师产品经理沟通如何交互。是否有相应的设计规范，如字体颜色间距等 什么地方必须100%还原什么地方可以灵活处理。 分析设计图结构 大屏 （PC 平板 ） 中屏 （小平板 大屏手机）小屏幕 （移动手机） 不同屏幕设计图 哪些是可变的，哪些是不变的 哪些可以复用的 布局可以用哪些元素 响应式网站设计实践原则 渐进增强 优雅降级 看客户受众决定先设计大屏还是小屏 浏览器 可以先在一个浏览器测试兼容性如谷歌，在测试其他浏览器 断点的选择 例如 0-480px 小屏幕 481-800 中屏幕 801-1400 大屏幕 1400以上 超大屏幕 组织项目目录结构 约定优于配置 建立相应的文件夹结构 css js images index.html 404.html 编写HTML 响应式网站01 标签：兼容 一个 设计师 layout 经理 htm 媒体查询 scala ann 原文地址：https://www.cnblogs.com/Xuman0927/p/12373425.html让网页自动适应电脑手机屏幕代码
meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
width
设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale
设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale
允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale
允许用户的最大缩放值，为一个数字，可以带小数
height
设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
上一篇：获取URL地址参数方法
下一篇：Netty