| 共 11 篇文章 |
|
打造无懈可击的web设计——流动布局和弹性布局。虽然在本文的无懈可击例子中重点介绍的是如何创建灵活可变的布局，但还是应该注意到，固定宽度的基于CSS的布局也具有无宽度限制的布局的很多优点。不必再用嵌套的表格在 HTML 代码中实现边框、背景和间隔，我们只要用几个简单的<div>，而不必再用CSS为每栏设置位置与样式，就可以轻松地构... 阅2368 转6 评0 公众公开 16-07-11 10:22 |
图片自适应大小的通用JS代码前几天群里碰到好几个在调整内容页图片尺寸太大时自动缩小的问题，今天我在做一个别墅设计相关网站时，也碰到了这个问题，所以考虑了个通用的解决方案。那最好的解决办法，莫过JS了，网上有一部流传的JS包括落叶博客里的这篇文章中的解决方法 ，都需要在图片中加onload属性来调用函数实现，但是这样的麻烦之处是要么... 阅5 转自WindySky 公众公开 16-07-08 16:34 |
让你文章中的图片自适应手机屏幕宽度让你文章中的图片自适应手机屏幕宽度 在使用手机浏览器过程中，我们常常发现，有些手机浏览器是可以自动压缩图片，让图片在手机上刚好适中显示的。而昨天在测试一个应用时发现，由于安卓4.4以上系统更换了webview内核，常常宽度是500px的图片在大分辨率手机上反而不如小分辨率手机上显示的效果后。 阅4597 转23 评0 公众公开 16-07-08 16:21 |
这就需要看懂网页的html代码了，需要分析每一个模块使用的div，例如头部的div、导航栏的div、正文的div、侧栏的div、页脚的div，然后，我们就使用css隐藏不用显示的div，代码很简单，就是display:none。/* 网页全屏显示 */ body {width:100%;}<style type="text/css"> /* 默认隐藏手机版头部、导航和页脚 */#divHead_mobile... 阅1223 转45 评0 公众公开 16-05-28 16:41 |
width: 940px;在自适应设计的技术中，css3支持css2.1定义的媒体类型，同时添加了很多涉及媒体类型的功能属性，包括max-width(最大宽度)，device-width(设备宽度，orientation(屏幕定向:横屏或竖屏)，因此可以通过Media Query加载相应的CSS文件. 例如，下面代码定义了如果页面通过屏幕呈现，并且屏幕宽度不超过480px,则加载shetland.css.@... 阅433 转5 评0 公众公开 16-05-28 16:38 |
media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。这只要一行CSS代码：img { max-width: 100%;}这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img, object { max-width: 100%;}老版本的IE不支... 阅166 转2 评0 公众公开 16-05-28 16:18 |
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。由于网页会根据屏幕宽度调整布局，所以不... 阅192 转1 评0 公众公开 16-05-28 13:47 |
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。width:xxx px;<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: ... 阅28 转1 评0 公众公开 16-05-28 13:41 |
