建设网站的视频,网站开发需要文章写的好吗,为什么要建设档案网站,甘肃网站建设专家一. 布局设计
固定布局#xff1a;以像素作为页面的基本单位#xff0c;不管设备屏幕及浏览器宽度#xff0c;只设计一套尺寸#xff1b; 可切换的固定布局#xff1a;同样以像素作为页面单位#xff0c;参考主流设备尺寸#xff0c;设计几套不同宽度的布局。通过设别的…一. 布局设计
固定布局以像素作为页面的基本单位不管设备屏幕及浏览器宽度只设计一套尺寸 可切换的固定布局同样以像素作为页面单位参考主流设备尺寸设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度选择最合适的那套宽度布局实现成本最低但拓展性比较差弹性布局以百分比作为页面的基本单位可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度并能完美利用有效空间展现最佳效果混合布局同弹性布局类似可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度并能完美利用有效空间展现最佳效果只是混合像素、和百分比两种单位作为页面单位。
参考https://www.w3cschool.cn/responsive/8w9adozt.html
总结对于通栏大于等于2栏的等分排版建议采用弹性布局大于等于2栏的非等分排版建议采用混合布局
二.布局响应
布局响应对页面进行响应式的设计实现需要对相同内容进行不同宽度的布局设计有两种方式桌面优先从桌面端开始向下设计移动优先从移动端向上设计
无论基于那种模式的设计要兼容所有设备布局响应时不可避免地需要对模块布局做一些变化发生布局改变的临界点称之为断点 我们通过JS获取设备的屏幕宽度来改变网页的布局这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式
布局不变对模块内的内容进行1.挤压拉伸2. 换行平铺3. 删减增加
布局改变主要有1.模块位置变换2.模块展示方式改变隐藏展开3.模块数量改变删减增加 三.媒体查询
要注意最大宽度时从大到小最小宽度时从小到大,否则样式优先级问题
方式一在样式表中内嵌media
media 设备名 only|and|not (media feature){CSS-Code}字符间以空格相连选取条件包含在小括号内多种设备用逗号分隔这一点继承了css基本语法。
only限定某种设备可省略and逻辑与not排除某种设备为逻辑关键字srules为兼容设置的样式表包含在中括号里面。
超小屏幕768px小屏幕768px中等屏幕992px大屏幕设备1200px
例子
/*屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。*/ media only screen and (min-device-width:480px) and (max-device-width:1024px) and ( orientation:portrait ){ .box{margin:0 auto;} } 方式二引用外部样式import
import url(css/?.css )设备名 only|and|not (media feature){CSS-Code}例子 import url(style/a.css) screen and (min-width:960px) and (max-width:1199px){ };注意最好在样式表中使用在style标签中使用IE6.7不兼容
方式三在link中使用media
link relstylesheet typetext/css hrefA.css mediascreen and (min-width: 800px)例子 link relstylesheet hrefstyle/b.css media only screen and (max-device-width:480px) 四.媒体查询media 使用media 查询你可以针对不同的媒体类型定义不同的样式。
参考http://www.runoob.com/cssref/css3-pr-mediaquery.html
https://www.w3cplus.com/content/css3-media-queries
主要媒体类型有可用设备
all---用于所有设备screen---用于电脑屏幕平板电脑智能手机等。print---用于打印机和打印预览speech---应用于屏幕阅读器等发声设备
媒体特性功能media 可以针对不同的屏幕尺寸设置不同的样式
媒体特性取值min/max描述widthlengthyes定义输出设备中的页面可见区域宽度heightlengthyes定义输出设备中的页面可见区域高度device-widthlengthyes定义输出设备的屏幕可见宽度device-heightlengthyes定义输出设备的屏幕可见高度orientationportrait 竖屏 landscape横屏 no定义height是否大于或等于width。 值portrait代表是---竖屏landscape代表否---横屏 aspect-ratioratioyes定义width与height的比率device-aspect-ratioratioyes定义device-width与device-height的比率。如常见的显示器比率4/3, 16/9, 16/10colorintegeryes定义每一组输出设备的彩色原件个数。如果不是彩色设备则值等于0color-indexintegeryes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表则值等于0monochromeintegeryes定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备则值等于0resolutionresolutionyes定义设备的分辨率。如96dpi, 300dpi, 118dpcmscanprogressive | interlaceno定义电视类设备的扫描工序 progressive连续扫描interlace交织扫描 gridintegerno用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值1代表是0代表否
五.常用视口
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0,minimum-scale1.0,user-scalablenoviewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做视区。
手机浏览器是把页面放在一个虚拟的窗口viewport中通常这个虚拟的窗口viewport比屏幕宽这样就不用把每个网页挤到很小的窗口中这样会破坏没有针对手机浏览器优化的网页的布局用户可以通过平移和缩放来看网页的不同部分。
可能的值
width---viewport的宽度 可能的值 像素| device-widthheight – viewport的高度---可能的值 像素| device-heightinitial-scale – 初始的缩放比例minimum-scale – 允许用户缩放到的最小比例maximum-scale – 允许用户缩放到的最大比例user-scalable – 用户是否可以手动缩放---可能的值yes||no或者1||0target-densitydpi--- [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
meta http-equivX-UA-Compatible contentIEedge此属性为文档兼容模式声明表示如果在IE浏览器下则使用最新的标准渲染当前文档
X-UA-Compatible是自从IE8新加的一个设置对于IE8以下的浏览器是不识别的。
IEedge 告诉IE,IE8以后的版本使用最新版本的引擎渲染网页;
chrome1安装了GCF后可以激活Chrome Frame.
emmet快捷键meta:compat
最后说下IE浏览器因为他不支持media Queries的使用时需要引用一个Media Query Javascript解决如下 !–[if lt IE 9]script src”../../css3-mediaqueries.js”/script![endif]–更多专业前端知识请上
【猿2048】www.mk2048.com
