![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
响应式网站设计
CHH5431
公众号:xssy5431 小拾岁月
展开
-
响应式网站设计(6)-媒体查询
媒体查询调试工具在PC端样式设置完毕之后,我们需要适配移动端。首先,我们选择的设备类型不是某一种设备,而是responsive。另外,我们可以打开标签和媒体查询,如下图:代码位置媒体查询的代码为止,并没有明确的规定。根据个人的习惯的不同,位置很灵活。但是,为了代码维护的方便性,我们建议,代码放置到对应外层容器标签css样式的最下方。单位选择在进行响应式网站设计的时候,媒...原创 2018-08-22 19:02:49 · 1868 阅读 · 0 评论 -
响应式网站设计(7)-打印样式
打印样式打印样式,顾名思义是网页打印专用的样式。对应需要打印的网页,可以专门添加打印样式。打印样式的主要作用的是去除背景颜色,去除阴影,换行处理等等。具体代码如下:@charset "utf-8";/* ============== 打印样式 ==============*/@media print { *, *:before, *:afte...原创 2018-08-23 08:47:38 · 456 阅读 · 0 评论 -
响应式网站设计(8)-广告轮播
广告轮播应用场景在制作响应式网站的时候,往往会遇到首页广告图片轮播的设计。该部分设计的实现可以通过自己手写实现,但是考虑到代码的简洁和复用性,我们建议使用相关插件来实现,推荐使用Owl Carousel 2。Owl Carousel 2插件官网:https://owl...原创 2018-08-23 11:35:32 · 912 阅读 · 0 评论 -
响应式网站设计(1)-理论
响应式网站设计响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。响应式网站的设计理念响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图...原创 2018-08-21 12:00:34 · 875 阅读 · 0 评论